这是我的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
根据这一行:https://github.com/pingyuanChen/webpack-uglify-js-plugin/blob/master/index.js#L117
应该是这样的:
var webpack = require("webpack");
module.exports = {
entry: "./entry.js",
devtool: "source-map",
output: {
path: "./dist",
filename: "bundle.js"
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compress: false
})
]
};
实际上,通过根据env / argv策略导出不同的配置,您可以拥有多个构建。
也许我来晚了,但我也有同样的问题,所以我为此写了一个unminifiedwebpack插件。
安装
npm install --save-dev unminified-webpack-plugin
使用
var path = require('path');
var webpack = require('webpack');
var UnminifiedWebpackPlugin = require('unminified-webpack-plugin');
module.exports = {
entry: {
index: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'library.min.js'
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new UnminifiedWebpackPlugin()
]
};
通过上述操作,您将得到library.min.js和library.js两个文件。不需要执行webpack两次,它只是工作!^ ^
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,一次完成同样的事情。