如何使用webpack构建缩小和未压缩的捆绑包？

Question

这是我的 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

Answer 1

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一起使用，并且一次完成相同的操作。