本文详解Webpack多页面应用打包配置。对比手动修改entry、extract-text-webpack-plugin和html-webpack-plugin的方法，与基于目录结构自动生成的动态配置方案。通过glob库遍历页面，实现增删页面无需修改配置文件的一劳永逸效果。
Webpack多页面应用打包配置概述
通常情况下，开发者利用 webpack 处理单页应用，只需设定单一入口及模板即可。然而在实际开发中，多页面项目的场景并不少见。当项目规模庞大难以全局掌控，或需要频繁进行迭代更新时，采用多页面架构更为适宜。这便引出了 webpack 针对多页面文件的打包配置问题。
手动配置方案
手动配置
多页应用的 webpack 配置与单页应用大体一致，主要差异在于需兼顾多个页面。loader、output 及 plugins 等基础配置通常无需变动，核心调整点在于入口文件 entry。若项目中使用了抽离 CSS 的 extract-text-webpack-plugin 插件以及自动生成 HTML 模板的 html-webpack-plugin，则需对这两个插件进行相应调整。多数情况下，仅需修改这三处配置；若项目中存在其他特殊需求，亦可参照此逻辑进行扩展。
示例的文件目录如下：
entry
单页应用的入口配置通常如下所示：
entry: resolve(__dirname, "src/home/index.js")该配置指定 webpack 从 /src/home/index.js 文件开始执行，进而进行后续的打包与编译流程。
对于多页应用，则需要配置多个入口文件，例如：
entry: {
home: resolve(__dirname, "src/home/index.js"),
about: resolve(__dirname, "src/about/index.js")
}如此配置后，项目便拥有了 home 和 about 两个入口。
extract-text-webpack-plugin
该插件的主要作用是将 CSS 样式抽离，避免样式代码被打包进 JS 文件中，从而防止页面样式加载错乱。在单页应用中，通常按如下方式使用此插件：
plugins: [
new ExtractTextPlugin('style.[contenthash].css')
]而在多页应用中，由于存在多个入口及对应的多个页面，每个页面拥有独立的 CSS 样式，因此需要为每个页面分别配置：
plugins: [
new ExtractTextPlugin('home/[name].[contenthash].css'),
new ExtractTextPlugin('about/[name].[contenthash].css')
]此外需注意，每个页面仅应包含自身的 CSS 样式。虽然理论上可将其他页面的 CSS 也打包至当前页面，但这显然不合理，不仅会增加冗余代码，还可能引发不可预知的样式覆盖问题。因此，需对如下 loader 配置进行修改：
{
test: /\.css$/,
loader: 'style!css!autoprefixer'
},
{
test: /\.scss$/,
loaders: [
'style',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
'sass',
'autoprefixer'
]
},
上述配置会将所有编译生成的 CSS 文件合并至同一文件中。我们的目标是将 CSS 分离，确保每个页面拥有独立的 CSS 样式文件：
// 为每个页面定义一个 ExtractTextPlugin
const homeExtractCss = new ExtractTextPlugin('home/[name].[contenthash].css')
const aboutExtractCss = new ExtractTextPlugin('about/[name].[contenthash].css')
// ...
module: {
rules: [
// 每个页面的 ExtractTextPlugin 只处理这个页面的样式文件
{
test: /src(\\|\/)home(\\|\/)css(\\|\/).*\.(css|scss)$/,
use: homePageExtractCss.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader', 'sass-loader']
})
},
{
test: /src(\\|\/)about(\\|\/)css(\\|\/).*\.(css|scss)$/,
use: salePersonalCenterExtractCss.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader', 'sass-loader']
})
}
]
}
// ...
// 每个页面都有各自的 ExtractTextPlugin，所以需要都声明一遍
plugins: [
homeExtractCss,
aboutExtractCss
]
html-webpack-plugin
在单页与多页应用的 webpack 配置中，html-webpack-plugin 插件的使用方式并无显著区别。
new HtmlWebpackPlugin({
filename: 'home/home.html',
template: 'src/home/html/index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true
}
})
new HtmlWebpackPlugin({
filename: 'about/about.html',
template: 'src/about/html/index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true
}
})
只需根据页面数量，对每个页面执行上述配置即可。
自动配置方案
自动配置
前述配置代码已能满足多页面开发的基本需求，但存在一个不足之处：每新增一个页面，都需手动更新 entry、extract-text-webpack-plugin 及 HtmlWebpackPlugin 的配置。尽管仅需几行代码且多为复制粘贴，但仍需人工介入，且易因疏忽遗漏。若能实现一劳永逸，即编写一次代码后，无论增删页面均无需再修改配置，则更为理想。
稍加观察目录结构即可发现，其具有明显的规律性：
每个页面均位于 src/ 目录下的独立文件夹中，该文件夹包含两个子目录，分别存放页面的模板 HTML 文件与样式文件 CSS，以及一个入口文件 index.js。
既然存在规律，便可通过程序编码实现自动化。若遵循此规则，即每个页面均为 ./src 下的一个目录，且目录名即为页面名，同时目录内部结构一致，则可通过通用方法获取所有页面名称（如 home、about）。以下示例展示了该方法：
function getEntry () {
let globPath = 'src/**/html/*.html'
// (\/|\\\\) 这种写法是为了兼容 windows和 mac系统目录路径的不同写法
let pathDir = 'src(\/|\\\\)(.*?)(\/|\\\\)html'
let files = glob.sync(globPath)
let dirname, entries = []
for (let i = 0; i < files.length; i++) {
dirname = path.dirname(files[i])
entries.push(dirname.replace(new RegExp('^' + pathDir), '$2'))
}
return entries
}
借助 glob 库，遍历 .src/ 目录下符合 src/**/html/*.html 规律的子目录，并通过正则表达式匹配出子目录名称。获取所有页面名称后，后续处理便迎刃而解。
entry
// entry: resolve(__dirname, "src/home/index.js")
// 改为
entry: addEntry()
//...
function addEntry () {
let entryObj = {}
getEntry().forEach(item => {
entryObj[item] = resolve(__dirname, 'src', item, 'index.js')
})
return entryObj
}
extract-text-webpack-plugin
// plugins: [
// new ExtractTextPlugin('home/[name].[contenthash].css'),
// new ExtractTextPlugin('about/[name].[contenthash].css')
//]
// 改为
const pageExtractCssArray = []
getEntry().forEach(item => {
pageExtractCssArray.push(new ExtractTextPlugin(item + '/[name].[contenthash].css'))
})
// ...
plugins: [...pageExtractCssArray]
删除 module.rules 中与样式相关的两个 loaders，改为动态添加：
getEntry().forEach((item, i) => {
webpackconfig.module.rules.push({
test: new RegExp('src' + '(\\\\|\/)' + item + '(\\\\|\/)' + 'css' + '(\\\\|\/)' + '.*\.(css|scss)$'),
use: pageExtractCssArray[i].extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader', 'sass-loader']
})
})
})
// ...
module.exports = webpackconfig
html-webpack-plugin
plugins 中无需手动初始化 html-webpack-plugin，改为动态添加：
getEntry().forEach(pathname => {
let conf = {
filename: path.join(pathname, pathname) + '.html',
template: path.join(__dirname, 'src', pathname, 'html', 'index.html')
}
webpackconfig.plugins.push(new HtmlWebpackPlugin(conf))
})
// ...
module.exports = webpackconfig完成上述修改后，无论项目中添加或删除页面，均无需再手动修改 webpack 配置。虽然初始动态自动配置代码量较多且略显复杂，但从长期维护角度来看，这绝对是一劳永逸的优良实践。
另外，若项目目录结构与示例不同，则需根据实际结构对代码进行少量调整，但整体解决思路不变。一个易于维护的项目，其目录结构应当具有规律可循。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。