如何获取Terser Webpack插件正常工作

Question

我试图了解如何使terser webpack插件在最简单的情况下工作。

这是我的代码：

src/math.js ，导出2个函数。

export const double = (x) =>
  x + x;

export const triple = (x) =>
  x + x + x;

scr/index.js ，仅导入double函数。

import { double } from './math.js';
console.log(double(10));

我从了解的WebPack的文档 ，我必须使用ModuleConcatenationPlugin如果我想激活树摇晃。

这是我的webpack配置：

webpack/index.js

const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'none',
  module: {
    rules: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            options: {
                presets: [
                    ['@babel/preset-env', {
                        modules: false
                    }]
                ],
                babelrc: false
            }
        }
    ]
  },
  plugins: [
      new webpack.optimize.ModuleConcatenationPlugin()
  ],
  optimization: {
      minimizer: [new TerserPlugin({})],
  }
};

我不明白我在Webpack配置中错过了什么。 Webpack的输出没有缩小或摇晃的声音...

---

节点：“ v10.10.0”

webpack：“ ^ 4.28.1”

webpack-cli：“ ^ 3.2.1”

@ babel / core：“ ^ 7.2.2”

@ babel / preset-env：“ ^ 7.1.5”

babel-loader：“ ^ 8.0.5”

terser-webpack-plugin：“ ^ 1.2.1”

Answer 1

看到您将mode设置为none ， optimization.minimize设置为false ，因此您的Terser定制实例永远不会实例化。

添加minimize: true对optimization对象为minimize: true ，它应该可以工作。