Javascript 如何使用 webpack 连接和缩小文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35471538/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I concatenate and minify files using webpack
提问by Binh Phan
I want to be able to minify and concatenate files to 1 single file without using grunt How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)can I achieve this with just webpack? I tried many different combinations but the issue is some of the libraries I use assuming that it's AMD or CommonJS format so I keep on getting errors.
我希望能够在不使用 grunt 的情况下将文件缩小和连接到 1 个单个文件如何使用 Grunt.js (0.3.x) 连接和缩小多个 CSS 和 JavaScript 文件我可以仅使用 webpack 来实现吗？我尝试了许多不同的组合，但问题是我使用的一些库假设它是 AMD 或 CommonJS 格式，所以我不断收到错误。
回答by Desmond Lua
Merge multiple CSS into single file can done using extract-text-webpack-pluginor webpack-merge-and-include-globally.
可以使用extract-text-webpack-plugin或webpack-merge-and-include-globally 将多个 CSS 合并到单个文件中。
https://code.luasoftware.com/tutorials/webpack/merge-multiple-css-into-single-file/
https://code.luasoftware.com/tutorials/webpack/merge-multiple-css-into-single-file/
To merge multiple JavaScripts into single file without AMD or CommonJS wrapper can be done using webpack-merge-and-include-globally. Alternatively, you can expose those wrapped modules as global scope using expose-loader.
可以使用webpack-merge-and-include-globally将多个 JavaScript 合并到一个没有 AMD 或 CommonJS 包装器的文件中。或者，您可以使用Exposure-loader将这些包装的模块公开为全局范围。
Example using webpack-merge-and-include-globally.
使用webpack-merge-and-include-globally 的示例。
const path = require('path');
const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally');
module.exports = {
entry: './src/index.js',
output: {
filename: '[name]',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new MergeIntoSingleFilePlugin({
"bundle.js": [
path.resolve(__dirname, 'src/util.js'),
path.resolve(__dirname, 'src/index.js')
],
"bundle.css": [
path.resolve(__dirname, 'src/css/main.css'),
path.resolve(__dirname, 'src/css/local.css')
]
})
]
};
回答by xlhuang
try this plugin, aims to concat and minify js without webpack:
试试这个插件，旨在在没有 webpack 的情况下连接和缩小 js：
回答by devnode
yes you can minify it with webpack looks like this
是的，你可以用 webpack 缩小它，看起来像这样
module.exports = {
// static data for index.html
metadata: metadata,
// for faster builds use 'eval'
devtool: 'source-map',
debug: true,
entry: {
'vendor': './src/vendor.ts',
'main': './src/main.ts' // our angular app
},
// Config for our build files
output: {
path: root('dist'),
filename: '[name].bundle.js',
sourceMapFilename: '[name].map',
chunkFilename: '[id].chunk.js'
},
resolve: {
// ensure loader extensions match
extensions: ['','.ts','.js','.json','.css','.html','.jade']
},
module: {
preLoaders: [{ test: /\.ts$/, loader: 'tslint-loader', exclude: [/node_modules/] }],
loaders: [
// Support for .ts files.
{
test: /\.ts$/,
loader: 'ts-loader',
query: {
'ignoreDiagnostics': [
2403, // 2403 -> Subsequent variable declarations
2300, // 2300 -> Duplicate identifier
2374, // 2374 -> Duplicate number index signature
2375 // 2375 -> Duplicate string index signature
]
},
exclude: [ /\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/ ]
},
// Support for *.json files.
{ test: /\.json$/, loader: 'json-loader' },
// Support for CSS as raw text
{ test: /\.css$/, loader: 'raw-loader' },
// support for .html as raw text
{ test: /\.html$/, loader: 'raw-loader' },
// support for .jade as raw text
{ test: /\.jade$/, loader: 'jade' }
// if you add a loader include the resolve file extension above
]
},
plugins: [
new CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity }),
// new CommonsChunkPlugin({ name: 'common', filename: 'common.js', minChunks: 2, chunks: ['main', 'vendor'] }),
// static assets
new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ]),
// generating html
new HtmlWebpackPlugin({ template: 'src/index.html', inject: false }),
// replace
new DefinePlugin({
'process.env': {
'ENV': JSON.stringify(metadata.ENV),
'NODE_ENV': JSON.stringify(metadata.ENV)
}
})
],
// Other module loader config
tslint: {
emitErrors: false,
failOnHint: false
},
// our Webpack Development Server config
devServer: {
port: metadata.port,
host: metadata.host,
historyApiFallback: true,
watchOptions: { aggregateTimeout: 300, poll: 1000 }
},
// we need this due to problems with es6-shim
node: {global: 'window', progress: false, crypto: 'empty', module: false, clearImmediate: false, setImmediate: false}
};
this is example minify and concat for angular2 webpack
这是 angular2 webpack 的缩小和连接示例
maybe you can read it https://github.com/petehunt/webpack-howtofirst
回答by gucheen
You don't need to concatenate files while using Webpack, because Webpack does this by default.
Webpack will generate a bundle file which includes all files that you have required in your project.
Webpack has built-in UglifyJs support (http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin)
使用 Webpack 时不需要连接文件，因为 Webpack 默认会这样做。
Webpack 将生成一个包文件，其中包含您在项目中需要的所有文件。
Webpack 具有内置的 UglifyJs 支持（http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin）
