Webpack捆绑包大小完全关闭

Question

我有机会从事使用Webpack 2和Babel 6的项目。几个小时后，我成功地将构建升级到Webpack 4和Babel8。也就是说，我们以前有两个文件vendor.js。 （228kb）和app.js（209kb），现在我们有了一个大文件，大小为2.3Mb。这些文件的大小以Chrome（压缩）格式显示。

在我的本地上，使用开发模式时，最后一个文件为13.4 Mb。具有生产模式的12.2 Mb。如果我在以下代码和生产模式下将“ moment”库添加到项目中，它将达到13.9 Mb：

import moment from 'moment';

由于我不在任何地方使用矩，所以我期望Webpack不会捆绑它；看起来三声摇晃不起作用/设置不正确？

[请在下面找到有关我的项目的一些有用信息，并让我知道您的想法。

。babelrc

{
  "presets": ["@babel/preset-react", ["@babel/preset-env", { "modules": false }]],
  "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }], "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-export-default-from", "react-hot-loader/babel", "@babel/plugin-transform-react-constant-elements"]
}

。webpack.config.js

const config = {
  optimization: {
    usedExports: true,
  },
  entry: {
    app: './src/scripts/index.js',
  },
  output: {
    chunkFilename: '[id].[hash].js',
    path: path.join(__dirname, 'dist'),
    filename: 'content/dam/pom/js/app.js',
  },
  resolve: {
    alias: {
      bodymovin: path.join(__dirname, 'vendor/bodymovin.min.js'),
      modernizr$: path.resolve(__dirname, '.modernizrrc'),
    },
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: process.env.NODE_ENV === 'development',
            },
          },
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /(dist|prerender|node_modules|vendor)/,
      },
      {
        test: /\.(gif|png|jpg|woff|woff2|eot|svg|ttf|json)$/,
        use: 'file-loader',
        exclude: /(node_modules|vendor)/,
      },
    ],
  },
  plugins: plugins,
};

package.json

"scripts": {
    "dev": "npm run clean && npm run copy-assets && npm run copy-vendor-scripts && NODE_ENV=production webpack -p --progress",
    "copy-assets": "rsync -a --exclude='.*' ./src/404.html ./src/content ./src/favicon.ico ./dist",
    "copy-vendor-scripts": "rsync -a ./vendor ./dist",
  },

Answer 1

解决：{mainFields：[“浏览器”，“模块”，“浏览器”，“主要”]，别名...}

将“模块”优先于“主”，适当地进行树状握手。