构建多页面应用——优化（一）

构建多页面应用的过程中，需要优化代码的结构。而优化代码的结构，往往会使用函数化编程。可参考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。
源代码
webpack4.x multi-page
构建多页面应用系列文章

构建多页面应用
构建多页面应用——单个页面的处理
构建多页面应用——模板
构建多页面应用——静态资源