構建多頁面應用的過程中，需要優化代碼的結構。而優化代碼的結構，往往會使用函數化編程。可參考webpack4.x-demo。
在進行多頁面應用編程的過程中，webpack.config.js的代碼規模會隨着項目規模的增加而增加。
而造成webpack.config.js文件增大的原因，主要是從entry，plugins的配置，而造成plugins增加是html-webpack-plugin和webpack-spritesmith的使用。因爲每增加一個頁面，就需要增加一個entry和實例化的html-wepback-plguin，而每增加一個雪碧圖就要使用一個webpack-spritesimth。
爲了更好的展示多頁面應用的開發，我將近期優化的一個項目的部分代碼整理了一下。演示地址，源代碼參考文章結尾提供的地址。
項目結構的改動
爲了方便發佈，需要調整一下項目的目錄結構。需要把assets文件夾提取到根目錄下，這個文件包含了項目所有的資源文件，如果放在src目錄下，會造成路徑問題，如：圖片、字體。如果不調整，會造成在開發的模式下可以訪問到的路徑，而在生產模式下不能訪問。
所以，爲了保證開發模式和生產模式下靜態資源的路徑一致，需要這樣的調整。
注：如果用vue做過開發的話，相信你就會明白，使用vue-cli生成的項目，在根目錄下有一個static文件夾，它用來保存項目開發的過程中引用到的所有的靜態資源，而本文中介紹的示例中的assets文件夾有類似的作用，這個文件夾後續還會繼續優化。
entry
首先，爲了簡化開發中的重複定義，添加了pages/utils/nav.js和pages/utils/subnav.js文件。它們用來存放項目各頁面的路由和seo優化所需要的信息。代表每個頁面的結構如下：
[
{
href: '/',
text: '首頁',
name: 'index',
meta: {
'description': '這是首頁',
'keywords': 'webpack, multi-page, 首頁',
'author': 'https://github.com/lvzhenbang/'
}
...
]
然後，根據需要新添加了一個multipage.config.js文件，在這裏定義瞭如何生成一個entry，代碼如下：
const path = require('path')
let navs = require('./pages/utils/nav')
const subnavs = require('./pages/utils/subnav')
navs = navs.concat(subnavs)
// entry
let entry = {}
for (let nav of navs) {
entry[nav.name] = './pages/' + nav.name + '.js'
}
// commons css/js
entry.other = ['./pages/utils/commons.js', './pages/utils/css.js']
plugins
plugins 包含兩部分。
第一部分，html-wepback-plugin，修改multipage.config 代碼如下：
···
// make pages
const HtmlWebapckPlugin = require('html-webpack-plugin');
let plugins = []
for (let nav of navs) {
plugins.push(new HtmlWebapckPlugin({
/* inital page */
filename: nav.name + '.html',
chunks: [nav.name, 'other'],
/* page head */
title: nav.text,
meta: nav.meta,
favicon: path.resolve(__dirname, 'assets/favicon.jpg'),
template: path.resolve(__dirname, 'pages/' + nav.name + '.pug'),
minify: true
}))
}
第二部分，webpack-spritesimth生成雪碧圖，修改multipage.config.js，代碼如下：
...
// sprites
const SpritesmithPlugin = require('webpack-spritesmith');
const sprites = require('./pages/utils/sprites')
for(let sprite of sprites) {
plugins.push(new SpritesmithPlugin({
src: {
cwd: path.resolve(__dirname, 'assets/imgs/sprites/' + sprite + '/'),
glob: '*.png'
},
target: {
image: path.resolve(__dirname, 'assets/imgs/other/' + sprite + '-sprite.png'),
css: path.resolve(__dirname, 'assets/css/' + sprite + '/' + sprite + '-sprite.scss')
},
apiOptions: {
cssImageRef: '../../imgs/other/' + sprite + '-sprite.png'
}
}))
}
根據項目需要，需添加pages/utils/sprites.js文件，它用來保存要合成的雪碧圖的名字，這個名字也是合成雪碧圖所需的圖片所在的文件夾名字。
這個文件比較簡單，用來導出一個字符串數組。
注：至於爲什麼只用一個字符串數組，構建多頁面應用——靜態資源這篇文章可以說明。
引用multipage.config.js
在webapck.config.js文件中引用multipage.config.js，代碼如下：
...
const multipage = require('./multipage.config')
let entry = multipage.entry,
plugins = multipage.plugins
module.exports = (mode) => {
...
return {
entry: entry,
...
plugins: plugins.concat([
new MiniCssExtractPlugin({
filename: isDev ? 'assets/css/[name].css' : 'assets/css/[name].[contenthash].css',
chunkFilename: isDev ? 'assets/css/[id].css' : 'assets/css/[id].[contenthash].css'
}),
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, 'assets/imgs/other/'),
to: path.resolve(__dirname, 'dist/assets/imgs/other/'),
ignore: ['.*']
}
])
])
}
}
當然，你可以考慮使用webpack-merge。