我正在尝试利用SplitChunks插件为每个MPA中的每个页面/模板生成单独的捆绑包。当我使用HtmlWebpackPlugin时，我为每个页面得到一个html文件，其中包含指向正确捆绑包的脚本标签。真棒！但是，我遇到的麻烦是我的供应商文件。 我希望单独的html文件仅指向他们需要的供应商捆绑包。当 SplitChunksPlugin 创建多个供应商捆绑包时，我无法让每个单独的 html 文件指向正确的供应商捆绑包。 生成的捆绑包是：
home.bundle.js
product.bundle.js
cart.bundle.js
vendors~cart~home~product.bundle.js
vendors~cart~product.bundle.js
所以基本上主页模板应该引用home.bundle.js，vendors~cart~home~product.bundle.js，而不是第二个供应商捆绑包。 只有购物车和产品模板应引用两个供应商捆绑包。 我正在使用 HtmlWebpackPlugin 的块选项，但无法让它拉取正确的供应商捆绑包，除非我明确引用它的名称，如下所示：
chunks: ['vendors~cart~home~product.bundle','home']
但这有点违背了动态呈现脚本标签的目的。 我尝试创建一个供应商入口点，但这将所有供应商混为一谈。 我缺少一些简单的配置吗？
My webpack.config.js：
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const Visualizer = require('webpack-visualizer-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
entry: {
home: './src/js/page-types/home.js',
product: './src/js/page-types/product.js',
cart: './src/js/page-types/cart.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist/js')
},
optimization: {
splitChunks: {
chunks: 'all'
}
},
plugins: [
new CleanWebpackPlugin(['dist']),
new Visualizer(),
new HtmlWebpackPlugin({
filename: 'home.html',
chunks: ['vendors','home']
}),
new HtmlWebpackPlugin({
filename: 'product.html',
chunks: ['vendors','product']
}),
new HtmlWebpackPlugin({
filename: 'cart.html',
chunks: ['vendors~cart~product','cart']
}),
], ...
我的js模块：
/* home.js */
import jQuery from 'jquery';
import 'bootstrap';
购物车和产品也引用了 React 库：
/* cart.js */
import jQuery from 'jquery';
import 'bootstrap';
import React from 'react';
import ReactDOM from 'react-dom';
/* product.js */
import jQuery from 'jquery';
import 'bootstrap';
import React from 'react';
import ReactDOM from 'react-dom';
示例 html 输出主页.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="home.bundle.js"></script></body>
</html>
使用 html-webpack-plugin 的第 4 版(现在处于测试阶段(，并且只在 chunks 选项中包含条目块。
npm i -D html-webpack-plugin@next
和
module.exports = {
new HtmlWebpackPlugin({
filename: 'home.html',
chunks: ['home']
}),
new HtmlWebpackPlugin({
filename: 'product.html',
chunks: ['product']
}),
new HtmlWebpackPlugin({
filename: 'cart.html',
chunks: ['cart']
}),
};
这将自动包括相关的块。
一种选择是手动创建供应商块，然后在HtmlWebpackPlugin的chunks选项中包含页面所需的任何块。
webpack.config.js：
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const Visualizer = require('webpack-visualizer-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
entry: {
home: './src/js/page-types/home.js',
product: './src/js/page-types/product.js',
cart: './src/js/page-types/cart.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist/js')
},
optimization: {
splitChunks: {
cacheGroups: {
'vendor-bootstrap': {
name: 'vendor-bootstrap',
test: /[\/]node_modules[\/](jquery|bootstrap)[\/]/,
chunks: 'initial',
priority: 2
},
'vendor-react': {
name: 'vendor-react',
test: /[\/]node_modules[\/]react.*?[\/]/,
chunks: 'initial',
priority: 2
},
'vendor-all': {
name: 'vendor-all',
test: /[\/]node_modules[\/]/,
chunks: 'initial',
priority: 1
},
}
}
},
plugins: [
new CleanWebpackPlugin(['dist']),
new Visualizer(),
new HtmlWebpackPlugin({
filename: 'home.html',
chunks: ['vendor-bootstrap', 'vendor-all', 'home']
}),
new HtmlWebpackPlugin({
filename: 'product.html',
chunks: ['vendor-bootstrap', 'vendor-react', 'vendor-all', 'product']
}),
new HtmlWebpackPlugin({
filename: 'cart.html',
chunks: ['vendor-bootstrap', 'vendor-react', 'vendor-all', 'cart']
}),
], ...
vendor-all块是捕获其他块中未包含的任何其他供应商库。