webpack 4 创建单独的供应商块

Question

我正在尝试为我的项目创建一个单独的供应商块 (vendor.js)。现在，当我运行 build 时，所有内容都捆绑到我的 app.js 文件中，并且文件很大。我的项目是一个 html 网站，在 webpack 中有一个文件夹结构，如下所示：

src/
├── js/
│   └──app.js
├── css/
|   └──app.css
└── images/
└── index.html

我的 webpack 配置如下所示：

module.exports = (env, argv) => ({
  mode: argv.mode,
  devtool: argv.mode === 'development' ? 'source-map' : false,
  entry: [
    './src/js/app.js',
    './src/css/app.css'
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'assets/app.js'
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin(),
      new OptimizeCSSAssetsPlugin(),
      new CopyPlugin({
        patterns: [{
          from: 'src/*.html',
          to: '[name].[ext]'
        }, {
          from: 'src/images/*',
          to: 'images/[name].[ext]'
        }]
      })
    ]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }, {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images/',
              name: '[name].[ext]'
            }
          }
        ]
      }, {
        test: /.(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
        exclude: /images/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'fonts/',
              name: '[name].[ext]'
            }
          }
        ]
      }, {
        test: /\.(css)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          }, {
            loader: 'css-loader'
          }, {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }, {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  ['autoprefixer']
                ]
              }
            }
          }, {
            loader: 'sass-loader',
            options: {
              implementation: require('sass')
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'assets/app.css'
    }),
    new ImageminWebpWebpackPlugin({
      config: [{
        test: /\.(jpe?g|png)/,
        options: {
          quality: 76
        }
      }],
      overrideExtension: true,
      detailedLogs: false,
      silent: false,
      strict: true
    })
  ],
  devServer: {
    contentBase: [
      path.join(__dirname, '/src')
    ],
    watchContentBase: true,
    compress: true,
    port: 9000,
    open: true
  }
});

这是我的依赖列表：

"dependencies": {
    "@barba/core": "^2.8.0",
    "@barba/prefetch": "^2.1.10",
    "fitty": "^2.3.2",
    "gsap": "file:gsap-bonus.tgz",
    "highlight.js": "^10.2.0",
    "imagemin": "^7.0.1",
    "imagemin-webp": "^6.0.0",
    "imagesloaded": "^4.1.4",
    "reset-css": "^5.0.1",
    "smooth-scrollbar": "^8.5.3"
  }

这是我在 webpack 中的第一个项目，从几个不同的在线视频中学到了一切，但没有一个涵盖我想要做的事情。我继续阅读 webpack 文档并尝试使用 Explicit vendor chunk 但我没有成功。

我的最终目标是将所有依赖项放在 vendor.js 文件中，然后放在 app.js 中，因此 index.html 中的脚本标记如下所示：

<script src="assets/vendor.js"></script> 
<script src="assets/app.js" defer></script>

Answer 1

我认为您只需要配置split-chunk-plugin。这是基于您需要的非常简单的配置：

// webpack.config.js
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: 'initial',
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
        },
      },
    },
  },
}

还有一点，如果您看到冲突名称错误，您可能需要根据当前文件名更改output.filename。

{
  output: {
    filename: "assets/[name].js",
  }
}