如何使用 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 文件夹中，我只得到

In my dist folder, I'm only getting

• 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

正如手册所述，插件可以替换为minimize选项.可以通过指定 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屋！