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

Question

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

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

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

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

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

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文件才能获得供应商。

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

Answer 1

我发现问题可能是由我想使用的哈希类型引起的：[内容哈希：8]

将其更改为仅[hash]后，捆绑包包含在所有文件中。

还更改了块配置，如下所示：

vendor: {
chunks: 'all',
name: 'vendor',
test: /[\/]node_modules[\/](vue)[\/]/,
enforce: true
},