这是我的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
当前回答
在我看来，直接使用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止损。jsx，输出
适用于我，使用-p标志。
你可以用不同的参数运行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
我找到了解决这个问题的新方法。
这使用了一个配置数组，使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将同时构建缩小版和非缩小版。
也许我来晚了，但我也有同样的问题，所以我为此写了一个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创建两个配置，一个可以减少代码，另一个则不能(只需删除优化)。然后同时运行两个配置$ webpack && webpack——config webpack.config.min.js
