如何使用webpack构建缩小和未压缩的包？ [英] How to build minified and uncompressed bundle with webpack?

问题描述

这是我的 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.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 已被弃用且其使用导致错误：

Since Webpack 4, webpack.optimize.UglifyJsPlugin has been deprecated and its use results in error:

webpack.optimize.UglifyJsPlugin已被删除，请改用config.optimization.minimize

webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead

手册解释说，插件可以用最小化选项替换。通过指定 UglifyJsPlugin 实例，可以为插件提供自定义配置：

As the manual explains, the plugin can be replaced with minimize option. Custom configuration can be provided to the plugin by specifying UglifyJsPlugin instance:

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

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

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

This does the job for a simple setup. A more effective solution is to use Gulp together with Webpack and do the same thing in one pass.

这篇关于如何使用webpack构建缩小和未压缩的包？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！