如何使用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

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

var webpack = require('webpack');

var 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'
  },
  plugins: PROD ? [
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false }
    })
  ] : []
};

然后在想要缩小它时设置此变量:

$ PROD_ENV=1 webpack

编辑:

如评论中所述,NODE_ENV通常使用(按照惯例)来说明特定环境是生产环境还是开发环境.要检查它,您还可以设置var PROD = (process.env.NODE_ENV === 'production')并正常继续.

Answer 2

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一起使用,并在一次通过中执行相同的操作.

Answer 3

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

Answer 4

要添加另一个答案,标志-p(简称--optimize-minimize)将使UglifyJS具有默认参数.

您不会从单次运行中获得缩小的原始包或生成不同名称的包,因此该-p标志可能不符合您的用例.

相反,该-d选项很短--debug --devtool sourcemap --output-pathinfo

我webpack.config.js省略了devtool,debug,pathinfo,并有利于这两个标志的minmize插件.

Answer 5

也许我迟到了,但我有同样的问题,所以我为此目的写了一个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两次,它只是工作!^^

Answer 6

在我看来,这是一个很多更容易只是使用UglifyJS直接的工具:

1. npm install --save-dev uglify-js
2. 正常使用webpack,例如构建./dst/bundle.js文件.

3. 添加build命令到您的package.json:

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

4. 无论何时想要构建捆绑包以及uglified代码和源映射,请运行该npm run build命令.

无需全局安装uglify-js,只需在本地为项目安装即可.

Answer 7

您可以为webpack创建两个配置,一个缩小代码,一个不缩放(只删除optimize.UglifyJSPlugin行),然后同时运行两个配置 $ webpack && webpack --config webpack.config.min.js

Answer 8

根据这一行: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策略,您可以通过导出不同的配置来实现多个构建.

Answer 9

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

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