javascript - 如何使用webpack构建缩小和未压缩的包？(How to build minified and uncompressed bundle with webpack?)

Question

Here's my webpack.config.js(这是我的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}) ] }; I'm building with(我正在建设) $ webpack In my dist folder, I'm only getting(在我的dist文件夹中，我只是得到了) bundle.min.js bundle.min.js.map I'd also like to see the uncompressed bundle.js(我也想看看未压缩的bundle.js)   ask by user633183 translate from so

Answer 1

You can use a single config file, and include the UglifyJS plugin conditionally using an environment variable:(您可以使用单个配置文件，并使用环境变量有条件地包含UglifyJS插件：)

var webpack = require('webpack'); var 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' }, plugins: PROD ? [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ] : [] }; and then just set this variable when you want to minify it:(然后在想要缩小它时设置此变量：) $ PROD_ENV=1 webpack
Edit:(编辑：) As mentioned in the comments, NODE_ENV is generally used (by convention) to state whether a particular environment is a production or a development environment.(正如评论中所提到的， NODE_ENV通常用于（按照惯例）说明特定环境是生产环境还是开发环境。) To check it, you can also set var PROD = (process.env.NODE_ENV === 'production') , and continue normally.(要检查它，您还可以设置var PROD = (process.env.NODE_ENV === 'production') ，并正常继续。)