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

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.reduce

正如手册所解释的那样，该插件可以替换为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 一起使用，并在一次传递中执行相同的操作。

您可以使用单个配置文件，并使用环境变量有条件地包含 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_ENV通常(按照惯例(用于说明特定环境是生产环境还是开发环境。要检查它，您还可以设置const PROD = (process.env.NODE_ENV === 'production')，然后正常继续。

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

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

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

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

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

也许我在这里迟到了，但我有同样的问题，所以我为此目的写了一个未缩小的 webpack 插件。

安装

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

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

根据这一行： 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
    })
  ]
};

事实上，您可以通过根据您的环境/argv 策略导出不同的配置来拥有多个构建。

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

这使用一系列配置使 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将同时构建缩小和非缩小版本。

webpack entry.jsx ./output.js -p

为我工作，带有-p旗帜。

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

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

• 缩小版+非缩小版(如问题中所示(
• 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

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

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'),
];

您可以在 webpack 配置中定义两个入口点，一个用于普通 js，另一个用于缩小的 js。然后你应该输出你的捆绑包及其名称，并配置 UglifyJS 插件以包含最小.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，不需要额外的插件。