这是我的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止损。jsx，输出
适用于我，使用-p标志。
其他回答
在我看来，直接使用UglifyJS工具要容易得多:
NPM install——save-dev uglify-js 正常使用webpack，例如构建一个。/dst/bundle.js文件。 在package.json中添加一个构建命令: "脚本":{ "build": "webpack && uglifyjs ./dst/bundle.js -c -m -o ./dst/bundle.min.js——source-map ./dst/bundle.min.js.map" ｝ 当你想要构建一个你的bundle以及丑陋的代码和源代码时，运行npm run build命令。
不需要全局安装uglify-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，一次完成同样的事情。
你可以用不同的参数运行webpack两次:
$ webpack --minimize
然后检查webpack.config.js中的命令行参数:
var path = require('path'),
webpack = require('webpack'),
minimize = process.argv.indexOf('--minimize') !== -1,
plugins = [];
if (minimize) {
plugins.push(new webpack.optimize.UglifyJsPlugin());
}
...
例子webpack.config.js
要添加另一个答案，flag -p(——optimize- minimal的缩写)将启用带有默认参数的UglifyJS。
您不会在一次运行中获得一个缩小的原始包，也不会生成不同名称的包，因此-p标志可能不符合您的用例。
相反，-d选项是——debug——devtool sourcemap——output-pathinfo的缩写
我的webpack.config.js省略了devtool、debug、pathinfo和最小化插件，取而代之的是这两个标志。
webpack止损。jsx，输出
适用于我，使用-p标志。
