如何使用webpack构build缩小的和未压缩的包？

这是我的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}) ] }; 

我正在build设

 $ webpack 

在我的dist文件夹中，我只能得到

• bundle.min.js
• bundle.min.js.map

我也想看到未压缩的bundle.js

Answer 1

您可以使用单个configuration文件，并使用环境variables有条件地包含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 } }) ] : [] }; 

然后在你想缩小它的时候设置这个variables：

 $ PROD_ENV=1 webpack 

编辑：

正如在评论中提到的那样， NODE_ENV通常用于（通过约定）来说明一个特定的环境是一个生产环境还是一个开发环境。 要检查它，你也可以设置var PROD = (process.env.NODE_ENV === 'production') ，并正常继续。

Answer 2

 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 }) ] }; 

虽然没有像在Gulp中一次完成同样的事情那样有效，但它只是简单的设置工作。

Answer 3

你可以用不同的参数运行两次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

Answer 4

要添加另一个答案，标志-p （– --optimize-minimize ）将使用默认参数启用UglifyJS。

你不会从一次运行中得到一个缩小的和未加工的包，或者生成不同名称的包，所以-p标志可能不符合你的用例。

相反， -d选项是--debug --devtool sourcemap --output-pathinfo --devtool sourcemap

我的webpack.config.js省略了devtool ， debug ， pathinfo和minmize插件来支持这两个标志。

Answer 5

也许我在这里迟到，但我有同样的问题，所以我为此写了一个unminified-webpack插件 。

安装

 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两次，它只是工作！^^

Answer 6

在我看来，直接使用UglifyJS工具更容易：

1. npm install --save-dev uglify-js
2. 正常使用webpack，比如build立一个./dst/bundle.js文件。

3. 将一个build命令添加到你的package.json ：

    "scripts": { "build": "webpack && uglifyjs ./dst/bundle.js -c -m -o ./dst/bundle.min.js --source-map ./dst/bundle.min.js.map" } 

4. 无论何时你想要构build你的bundle以及丑陋的代码和源代码，运行npm run build命令。

无需在全球安装uglify-js，只需在本地为项目安装。

Answer 7

您可以为webpack创build两个configuration文件，一个用于缩小代码，另一个不用（仅删除optimize.UglifyJSPlugin行），然后同时运行这两个configuration。 $ webpack && webpack --config webpack.config.min.js

Answer 8

根据这一行： 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策略导出不同的configuration来build立多个版本。

Answer 9

你可以像这样格式化你的webpack.config.js：

 var debug = process.env.NODE_ENV !== "production"; var webpack = require('webpack'); module.exports = { context: __dirname, devtool: debug ? "inline-sourcemap" : null, entry: "./entry.js", output: { path: __dirname + "/dist", filename: "library.min.js" }, plugins: debug ? [] : [ new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), ], };' 

然后build立它unminified运行（在项目的主目录中）：

 $ webpack 

build立它缩小运行：

 $ NODE_ENV=production webpack 

注意：确保对于未修剪的版本，您将输出文件名更改为library.js ，并将缩小的library.min.js更改为不相互覆盖。

Answer 10

webpack entry.jsx ./output.js -p

为我工作，与-p标志。

Answer 11

您可以在您的webpackconfiguration中定义两个入口点，一个用于正常的js，另一个用于缩小js。 然后，你应该输出你的软件包名称，并configurationUglifyJS插件包括min.js文件。 有关更多详细信息，请参阅示例webpackconfiguration：

 module.exports = { entry: { 'bundle': './src/index.js', 'bundle.min': './src/index.js', }, output: { path: path.resolve(__dirname, 'dist'), filename: "[name].js" }, plugins: [ new webpack.optimize.UglifyJsPlugin({ include: /\.min\.js$/, minimize: true }) ] }; 

运行webpack之后，你会在你的dist文件夹中得到bundle.js和bundle.min.js，不需要额外的插件。