这是我的webpack.config.js
var webpack = require("webpack");
module.exports = {
entry: "./entry.js",
devtool: "source-map",
output: {
path: "./dist",
filename: "bundle.min.js"
},
plugins: [
new webpack.optimize.UglifyJsPlugin({minimize: true})
]
};
我用
$ webpack
在dist文件夹里,我只得到
bundle.min.js
bundle.min.js.map
我还想看看未压缩的bundle.js
你可以在webpack配置中定义两个入口点,一个用于普通js,另一个用于迷你js。然后你应该输出你的bundle和它的名字,并配置UglifyJS插件来包含min.js文件。请参阅webpack配置示例了解更多细节:
module.exports = {
entry: {
'bundle': './src/index.js',
'bundle.min': './src/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: "[name].js"
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
include: /\.min\.js$/,
minimize: true
})
]
};
运行webpack后,你会在dist文件夹中得到bundle.js和bundle.min.js,不需要额外的插件。
我找到了解决这个问题的新方法。
这使用了一个配置数组,使webpack能够并行地构建精简版和非精简版。这使得构建更快。不需要运行webpack两次。不需要额外的插件。只是webpack。
webpack.config.js
const devConfig = {
mode: 'development',
entry: { bundle: './src/entry.js' },
output: { filename: '[name].js' },
module: { ... },
resolve: { ... },
plugins: { ... }
};
const prodConfig = {
...devConfig,
mode: 'production',
output: { filename: '[name].min.js' }
};
module.exports = (env) => {
switch (env) {
case 'production':
return [devConfig, prodConfig];
default:
return devConfig;
}
};
运行webpack将只生成非缩小版本。
运行webpack——env=production将同时构建缩小版和非缩小版。
你可以在webpack配置中定义两个入口点,一个用于普通js,另一个用于迷你js。然后你应该输出你的bundle和它的名字,并配置UglifyJS插件来包含min.js文件。请参阅webpack配置示例了解更多细节:
module.exports = {
entry: {
'bundle': './src/index.js',
'bundle.min': './src/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: "[name].js"
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
include: /\.min\.js$/,
minimize: true
})
]
};
运行webpack后,你会在dist文件夹中得到bundle.js和bundle.min.js,不需要额外的插件。
webpack.config.js:
const webpack = require("webpack");
module.exports = {
entry: {
"bundle": "./entry.js",
"bundle.min": "./entry.js",
},
devtool: "source-map",
output: {
path: "./dist",
filename: "[name].js"
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
include: /\.min\.js$/,
minimize: true
})
]
};
从Webpack 4开始,Webpack .optimize. uglifyjsplugin已被弃用,使用它会导致错误:
webpack.optimize.UglifyJsPlugin已被删除,请使用config.optimization.minimize代替
正如手册解释的那样,插件可以用最小化选项代替。自定义配置可以通过指定UglifyJsPlugin实例提供给插件:
const webpack = require("webpack");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// ...
optimization: {
minimize: true,
minimizer: [new UglifyJsPlugin({
include: /\.min\.js$/
})]
}
};
这是一个简单的设置。一个更有效的解决方案是同时使用Gulp和Webpack,一次完成同样的事情。