如何使用 webpack 构建压缩和未压缩的包？答案

【问题标题】：How to build minified and uncompressed bundle with webpack?如何使用 webpack 构建压缩和未压缩的包？
【发布时间】：2014-11-15 09:46:27
【问题描述】：

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

【问题讨论】：

标签： javascript node.js webpack

【解决方案1】：

您可以使用单个配置文件，并使用环境变量有条件地包含 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

编辑：

如 cmets 中所述，NODE_ENV 通常用于（按照惯例）来说明特定环境是生产环境还是开发环境。也可以设置const PROD = (process.env.NODE_ENV === 'production')查看，正常继续。

【讨论】：

节点有一个“默认”变量，它被称为 NODE_ENV。
选项不是叫compress而不是minimize吗？
只是一个小问题：当您使用参数调用 webpack 时，例如 webpack -p，您的 webpack 配置中 webpack.optimize.UglifyJsPlugin 的设置将是（在至少部分）忽略（至少设置mangle: false被忽略）。
请注意，这一次只生成一个文件。因此，为了解决这个问题，应该有多个 Webpack 通道，webpack && webpack -p。
对于任何阅读本文的人，我建议改用definePlugin，我认为它默认安装在 Webpack 中。

【解决方案2】：

你应该像这样导出一个数组：

const path = require('path');
const webpack = require('webpack');

const libName = 'YourLibraryName';

function getConfig(env) {
  const config = {
    mode: env,
    output: {
      path: path.resolve('dist'),
      library: libName,
      libraryTarget: 'umd',
      filename: env === 'production' ? `${libName}.min.js` : `${libName}.js`
    },
    target: 'web',
    .... your shared options ...
  };

  return config;
}

module.exports = [
  getConfig('development'),
  getConfig('production'),
];

【讨论】：

【解决方案3】：

我找到了解决这个问题的新方法。

这使用一组配置来使 webpack 能够并行构建缩小版和非缩小版。这使构建更快。无需运行 webpack 两次。不需要额外的插件。只是 webpack。

webpack.config.js

const devConfig = {
  mode: 'development',
  entry: { bundle: './src/entry.js' },
  output: { filename: '[name].js' },
  module: { ... },
  resolve: { ... },
  plugins: { ... }
};

const prodConfig = {
  ...devConfig,
  mode: 'production',
  output: { filename: '[name].min.js' }
};

module.exports = (env) => {
  switch (env) {
    case 'production':
      return [devConfig, prodConfig];
    default:
      return devConfig;
  }
};

运行webpack 只会构建非缩小版。

运行webpack --env=production 将同时构建缩小版和非缩小版。

【讨论】：

【解决方案4】：

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

正如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$/
    })]
  }
};

这可以完成简单的设置。更有效的解决方案是将 Gulp 与 Webpack 一起使用，并一次性完成相同的操作。

【讨论】：

@FeloVilches 我什至没有提到这是在 webpack.config.js 中完成的，但是一旦我们进入 Node.js 领域并使用 Webpack，这是假定的。
嗯，在 webpack 4 我得到了：Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
更新：现在你可以使用 terser-webpack-plugin webpack.js.org/plugins/terser-webpack-plugin

【解决方案5】：

我遇到了同样的问题，并且必须满足所有这些要求：

缩小版 + 非缩小版（如问题所示）
ES6
跨平台（Windows + Linux）。

我终于解决了如下：

webpack.config.js：

const path = require('path');
const MinifyPlugin = require("babel-minify-webpack-plugin");

module.exports = getConfiguration;

function getConfiguration(env) {
    var outFile;
    var plugins = [];
    if (env === 'prod') {
        outFile = 'mylib.dev';
        plugins.push(new MinifyPlugin());
    } else {
        if (env !== 'dev') {
            console.log('Unknown env ' + env + '. Defaults to dev');
        }
        outFile = 'mylib.dev.debug';
    }

    var entry = {};
    entry[outFile] = './src/mylib-entry.js';

    return {
        entry: entry,
        plugins: plugins,
        output: {
            filename: '[name].js',
            path: __dirname
        }
    };
}

package.json:

{
    "name": "mylib.js",
    ...
    "scripts": {
        "build": "npm-run-all webpack-prod webpack-dev",
        "webpack-prod": "npx webpack --env=prod",
        "webpack-dev": "npx webpack --env=dev"
    },
    "devDependencies": {
        ...
        "babel-minify-webpack-plugin": "^0.2.0",
        "npm-run-all": "^4.1.2",
        "webpack": "^3.10.0"
    }
}

然后我可以通过（别忘了npm install之前）：

npm run-script build

【讨论】：

我收到了这个错误 ERROR in unknown: Invalid typeof value

【解决方案6】：

您可以在 webpack 配置中定义两个入口点，一个用于普通 js，另一个用于缩小 js。然后你应该用它的名字输出你的包，并配置 UglifyJS 插件来包含 min.js 文件。有关详细信息，请参阅示例 webpack 配置：

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，不需要额外的插件。

【讨论】：

不推荐使用的解释

【解决方案7】：

根据这一行：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 策略导出不同的配置来进行多个构建。

【讨论】：

感谢您对一个古老但仍然相关的问题的有用回答，Mauro ^_^
在文档中找不到选项 minimize。也许它已被弃用？
@adi518 也许您使用的是较新版本的插件，而不是捆绑在 webpack 中的那个？

【解决方案8】：

你可以像这样格式化你的 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，它们不会相互覆盖。

【讨论】：

【解决方案9】：

要添加另一个答案，标志 -p（--optimize-minimize 的缩写）将启用带有默认参数的 UglifyJS。

您不会在一次运行中获得缩小的原始包或生成不同名称的包，因此-p 标志可能不符合您的用例。

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

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

【讨论】：

感谢@everett1992，这个解决方案效果很好。绝大多数时间我运行开发构建，然后当我完成时，我使用 -p 标志来吐出一个缩小的生产构建。无需创建两个单独的 Webpack 配置！

【解决方案10】：

webpack entry.jsx ./output.js -p

为我工作，带有-p 标志。

【讨论】：

【解决方案11】：

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

npm install --save-dev uglify-js
正常使用 webpack，例如构建一个./dst/bundle.js 文件。

将build 命令添加到您的package.json：

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

无论何时您想要构建您的包以及丑化代码和源映射，请运行npm run build 命令。

uglify-js无需全局安装，项目本地安装即可。

【讨论】：

是的，这是一个简单的解决方案，只允许您构建一次

【解决方案12】：

也许我来晚了，但我也有同样的问题，所以我为此写了unminified-webpack-plugin。

安装

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，它就可以了！^^

【讨论】：

这个插件似乎与 SourceMapDevToolPlugin 不兼容。有什么保留源地图的建议吗？
@BhavikUp，不支持。你认为你真的需要将 source map 与最终的 js 文件一起输出吗？
"不需要执行 webpack 两次 [...]" 很好，但是estus 的解决方案也不需要“执行 webpack 两次”，另外也不需要添加第三方插件。
@Howard Man，你来对了 :)。至少对我来说。非常感谢伟大的插件！似乎与 webpack 2 和 -p 选项完美配合。

【解决方案13】：

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

【讨论】：

对我来说似乎很简单的解决方案；从 webpack v3.5.5 开始，它有内置的开关，称为 --optimize-minimize 或 -p。
这个想法很酷，但是现在不行，webpack 会喊“Unknown argument: minimize” 解决方法：使用--env.minimize 更多细节在下面的链接github.com/webpack/webpack/issues/2254
可以使用更标准的方式在 webpack 中传递环境指示：stackoverflow.com/questions/44113359/…

【解决方案14】：

您可以为 webpack 创建两个配置，一个缩小代码，一个不缩小（只需删除 optimize.UglifyJSPlugin 行），然后同时运行这两个配置$ webpack && webpack --config webpack.config.min.js

【讨论】：

谢谢，这很好用，但是如果有比维护两个配置文件更好的方法来做到这一点肯定会很好，因为这是一个常见的用例（几乎任何库构建)。