webpack - 使用 html-webpack-plugin 时，供应商块仅包含在第一个 html 文件中

问题描述

我想为生产设置一个 webpack 4 配置，它使用 html-webpack-plugin 创建多个 html 文件。同时，我想将我的供应商库提取为单独的块，并通过使用 html-webpack-plugin 手动设置哪个 html 文件使用哪个供应商块。

我刚刚开始这个项目，所以目前我唯一的供应商库是 vue.js，但随着时间的推移，它会增长。

我想通过以下配置实现的只是将 vue js 作为单个供应商库包含在我指定的所有 html 文件中：HtmlWebpackPlugin 中的块：['vendor']。

不幸的是，我的供应商捆绑包仅包含在第一个 html 文件中，之后它被忽略了。

我还发现，我无法通过以下方式控制供应商库的包含：块：['vendor'，'app']。'vendor' 只是被忽略了，可能是因为它只检查条目配置中的内容。

const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const MinifyPlugin = require("babel-minify-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = function (env, argv) {
  return {
    mode: 'production',
    entry: {
      vendor: ['vue'],
      app: './src/js/app/app.js',
      appCompose: './src/js/app/app-compose.js',
    },
    output: {
      path: path.resolve(__dirname, "target/dist"), // string
      filename: '[name].[contenthash:8].bundle.js'
    },
    optimization: {
      minimizer: [
        new OptimizeCSSAssetsPlugin(),
        new UglifyJsPlugin({
          test: /\.js(\?.*)?$/i,
          exclude: /(node_modules)/,
          cache: false,
          parallel: true,
          sourceMap: true,
          extractComments: true
        })
      ],
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /node_modules/,
            chunks: 'initial',
            name: 'vendor',
            enforce: true
          },
        }
      },

    },
    plugins: [
      new CleanWebpackPlugin(['target']),

      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      }),
      new MinifyPlugin(),
      new webpack.NoEmitOnErrorsPlugin(),
      new HtmlWebpackPlugin({
        template: './src/pages/index/index.html',
        filename: path.resolve(__dirname, 'target/index.html'),
        chunksSortMode: "manual",
        chunks: ['vendor','app'],
      }),
      new HtmlWebpackPlugin({
        template: './src/pages/compose/index.html',
        filename: path.resolve(__dirname, 'target/compose.html'),
        chunksSortMode: "manual",
        chunks: ['vendor','appCompose'],
      }),
    ],
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"
          ]
        },
        {
          test: /\.m?js$/,
          exclude: /(node_modules)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
  }
};

这里的预期行为是每个 html 文件都从输出中接收供应商及其自己的包。实际发生的情况是，只有第一个 html 文件才能获得供应商。

能够配置这样的页面会很棒：chunks: ['vue','loadash','appCompose') 并且 html-webpack-plugin 将它们注入到文件中。

标签： webpackwebpack-4html-webpack-pluginwebpack-splitchunks

webpack - 使用 html-webpack-plugin 时，供应商块仅包含在第一个 html 文件中

问题描述

解决方案

推荐阅读