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

javascript node.js webpack

2022-08-30 00:26:40

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

答案 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 代替

如手册所述，该插件可以用选项替换。可以通过指定实例为插件提供自定义配置：minimizeUglifyJsPlugin

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

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

这完成了简单设置的工作。更有效的解决方案是将 Gulp 与 Webpack 一起使用，并在一次传递中执行相同的操作。

答案 2

您可以使用单个配置文件，并使用环境变量有条件地包含UglifyJS插件：

const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');

const 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'
  },
  optimization: {
    minimize: PROD,
    minimizer: [
      new TerserPlugin({ parallel: true })
  ]
};

然后当你想要缩小它时，只需设置这个变量：

$ PROD_ENV=1 webpack

编辑：

如注释中所述，通常（按照惯例）用于说明特定环境是生产环境还是开发环境。要检查它，您还可以设置，然后正常继续。NODE_ENVconst PROD = (process.env.NODE_ENV === 'production')