这是我的 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.jsbundle.min.js.map我也想看未压缩的 bundle.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 代替
正如手册所解释的，插件可以替换为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 一起使用，并一次性完成相同的事情。
您可以使用单个配置文件，并使用环境变量有条件地包含 UglifyJS 插件：
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
const PROD = JSON.parse(process.env.PROD_ENV || '0');
module.exports = {
entry: './entry.js',
devtool: 'source-map',
output: {
path: './dist',
filename: PROD ? 'bundle.min.js' : 'bundle.js'
},
optimization: {
minimize: PROD,
minimizer: [
new TerserPlugin({ parallel: true })
]
};
然后在你想缩小它时设置这个变量：
$ PROD_ENV=1 webpack
编辑：
如评论中所述，NODE_ENV通常（按照惯例）用于说明特定环境是生产环境还是开发环境。要检查它，您还可以设置const PROD = (process.env.NODE_ENV === 'production')，然后正常继续。
您可以使用不同的参数运行 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());
}
...
要添加另一个答案，标志-p（ 的缩写--optimize-minimize）将使用默认参数启用 UglifyJS。
您不会从单次运行中获得缩小的原始包，-p也不会生成不同名称的包，因此该标志可能不符合您的用例。
相反，该-d选项的缩写为--debug --devtool sourcemap --output-pathinfo
我的 webpack.config.js 省略了devtool, debug,pathinfo和 minmize 插件以支持这两个标志。
也许我来晚了，但我有同样的问题，所以我为此编写了一个unminified-webpack-plugin。
安装
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 两次，它就可以工作！^^