Javascript 如何使用 webpack 构建压缩和未压缩的包

发布于12月01日

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

推荐答案

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已被弃用，使用它会导致错误:

网页包.优化UglifyJsPlugin已被删除，请使用配置.优化.而是最小化

正如the manual解释的那样，该插件可以替换为minimize选项.通过指定UglifyJsPlugin实例，可以为插件提供自定义配置:

const webpack = require("webpack");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [new UglifyJsPlugin({
      include: /\.min\.js$/
    })]
  }
};

这可以完成简单设置的工作.一个更有效的解决方案是和webpack一起使用古尔普，一次过做同样的事情.