webpack 5 - 多页面网站构建教程
动态定义每个页面的条目
将所有必要的代码注入到 HTML 中。
优化
完整配置和示例应用程序
链接
还想要更多吗？
你是否曾经想过如何使用 webpack 构建多页面网站？如果是这样——无论是由于维护旧页面，还是由于一些当前的架构决策——专注于单页应用程序 (SPA) 的资料可能会让你产生一些疑问。
动态定义每个页面的条目
在我们的例子中，我们需要为每个页面定义一个条目。假设我们有一个页面列表（存储在一个数组中）pages = ['a', 'b']，那么entry:webpack 配置的相应部分可以如下所示：
entry: pages.reduce((config, page) => {
config[page] = `./src/${page}.js`;
return config;
}, {}),
只需一点函数式编程，我们就把pages列表转换成了：
{
a: '.src/a.js',
b: '.src/b.js'
}
我们可以将其设置为entry。因为这样做，下次我们添加新页面时，就只会向列表中添加一个元素，而无需复制粘贴代码。
将所有必要的代码注入到 HTML 中。
与单页应用 (SPA) 类似，我们希望动态地将导入项注入到 HTML 中。为此，我们使用 ` <script> HtmlWebpackPlugin` 标签。同样，我们希望使用pages数组，这样在添加新页面时可以避免重复编写代码。因此，我们将动态构建 `<script>` 标签plugins:，并预留空间用于添加其他不相关的插件。
plugins: [].concat(
pages.map(
(page) =>
new HtmlWebpackPlugin({
inject: true,
template: `./${page}.html`,
filename: `${page}.html`,
chunks: [page],
})
),
// <- here goes array(s) of other plugins
),
优化
为了最大限度地发挥架构优势，我们需要将构建的代码拆分成多个代码块。这样，如果代码块足够大且在多个页面中使用，我们就可以重用其中的部分代码。幸运的是，我们只需添加以下代码即可实现这一点：
optimization: {
splitChunks: {
chunks: "all",
},
},
完整配置和示例应用程序
完整的工作配置：
const path = require("path"),
HtmlWebpackPlugin = require("html-webpack-plugin");
const pages = ["a", "b"];
module.exports = {
entry: pages.reduce((config, page) => {
config[page] = `./src/${page}.js`;
return config;
}, {}),
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
},
optimization: {
splitChunks: {
chunks: "all",
},
},
plugins: [].concat(
pages.map(
(page) =>
new HtmlWebpackPlugin({
inject: true,
template: `./${page}.html`,
filename: `${page}.html`,
chunks: [page],
})
)
),
};
要体验这项功能，最简单的方法是查看示例应用程序的仓库：
https://github.com/marcin-wosinek/webpack-multipage-example
链接
还想要更多吗？
您可以在这里看到我对示例的详细讲解：