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，一次完成同样的事情。

webpack止损。jsx，输出

适用于我，使用-p标志。

根据这一行: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策略导出不同的配置，您可以拥有多个构建。

你可以这样格式化你的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 }),
    ],
};'

然后构建它的非最小化运行(在项目的主目录中):

$ webpack

要构建它的最小化运行:

$ NODE_ENV=production webpack

注: 确保对于非简化版本，您将输出文件名更改为library.js，对于简化版本，则将输出文件名更改为library.min.js，以便它们不会相互覆盖。

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

在我看来，直接使用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，只需为项目在本地安装即可。