如何将 Webpack 4 SplitChunksPlugin 和 HtmlWebpackPlugin 用于多页面应用程序? [英] How to use Webpack 4 SplitChunksPlugin with HtmlWebpackPlugin for Multiple Page Application?
问题描述
我正在尝试利用 SplitChunksPlugin 为 MPA 中的每个页面/模板生成单独的包.当我使用 HtmlWebpackPlugin 时，我会为每个页面获取一个 html 文件，其中的脚本标记指向正确的包.太棒了！但是，我遇到的问题是我的供应商文件.我希望单独的 html 文件只指向他们需要的供应商包.当 SplitChunksPlugin 创建多个供应商包时，我无法让每个单独的 html 文件指向正确的供应商包.产生的捆绑包是:
I'm trying to utilize the SplitChunksPlugin to produce separate bundles per each page/template in a MPA. When I use the HtmlWebpackPlugin, I get an html file for each page with a script tag pointing to the correct bundle. That is great! However, the trouble I'm having is with my vendor files. I want separate html files to point to only the vendor bundles they need. I can't get each separate html file to point to the correct vendor bundles when the SplitChunksPlugin creates multiple vendor bundles. The bundles produced are:
home.bundle.js
product.bundle.js
cart.bundle.js
vendors~cart~home~product.bundle.js
vendors~cart~product.bundle.js
所以基本上主页模板应该引用home.bundle.js、vendor~cart~home~product.bundle.js，而不是第二个vendor bundle.只有购物车和产品模板应该引用这两个供应商捆绑包.我正在使用 HtmlWebpackPlugin 的 chunks 选项，但无法获得正确的供应商包，除非我像这样明确引用它的名称:
So basically the home template should reference home.bundle.js, vendors~cart~home~product.bundle.js, and not the second vendor bundle. Only the cart and product templates should reference both vendor bundles. I am utilizing the chunks option for the HtmlWebpackPlugin but can't get it to pull the correct vendor bundles unless I explicitly reference the name of it like so:
chunks: ['vendors~cart~home~product.bundle','home']
但这有点违背了动态呈现脚本标签的目的.我曾尝试创建供应商入口点，但这将我所有的供应商混为一谈.是否有一些我遗漏的简单配置?
But this kinda defeats the purpose of dynamically rendering your script tags. I've tried creating a vendor entry point but this lumps all my vendors together. Is there some simple config I'm missing?
我的 webpack.config.js:
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';
cart 和 product 也引用了 react 库:
cart and product also reference the react library:
/* 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 输出 home.html:
Example html output home.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 的 version4(现在是 beta 版)，并且只在 chunks 选项中包含 entry chunk.
Use version4 of html-webpack-plugin (which is in beta now), and only include the entry chunk in the chunks option.
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']
}),
};
这将自动包含相关块.
这篇关于如何将 Webpack 4 SplitChunksPlugin 和 HtmlWebpackPlugin 用于多页面应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
