構(gòu)建多頁面應(yīng)用的過程中赫蛇，需要優(yōu)化代碼的結(jié)構(gòu)。而優(yōu)化代碼的結(jié)構(gòu)凳厢，往往會(huì)使用函數(shù)化編程账胧。可參考webpack4.x-demo先紫。
在進(jìn)行多頁面應(yīng)用編程的過程中治泥，webpack.config.js的代碼規(guī)模會(huì)隨著項(xiàng)目規(guī)模的增加而增加。
而造成webpack.config.js文件增大的原因遮精，主要是從entry居夹，plugins的配置，而造成plugins增加是html-webpack-plugin和webpack-spritesmith的使用。因?yàn)槊吭黾右粋€(gè)頁面准脂，就需要增加一個(gè)entry和實(shí)例化的html-wepback-plguin劫扒，而每增加一個(gè)雪碧圖就要使用一個(gè)webpack-spritesimth。
為了更好的展示多頁面應(yīng)用的開發(fā)狸膏，我將近期優(yōu)化的一個(gè)項(xiàng)目的部分代碼整理了一下粟关。演示地址，源代碼參考文章結(jié)尾提供的地址环戈。
項(xiàng)目結(jié)構(gòu)的改動(dòng)
為了方便發(fā)布闷板，需要調(diào)整一下項(xiàng)目的目錄結(jié)構(gòu)。需要把assets文件夾提取到根目錄下院塞，這個(gè)文件包含了項(xiàng)目所有的資源文件遮晚，如果放在src目錄下，會(huì)造成路徑問題拦止，如：圖片县遣、字體。如果不調(diào)整汹族，會(huì)造成在開發(fā)的模式下可以訪問到的路徑萧求，而在生產(chǎn)模式下不能訪問。
所以顶瞒，為了保證開發(fā)模式和生產(chǎn)模式下靜態(tài)資源的路徑一致夸政，需要這樣的調(diào)整。
注：如果用vue做過開發(fā)的話榴徐，相信你就會(huì)明白守问，使用vue-cli生成的項(xiàng)目，在根目錄下有一個(gè)static文件夾坑资，它用來保存項(xiàng)目開發(fā)的過程中引用到的所有的靜態(tài)資源耗帕，而本文中介紹的示例中的assets文件夾有類似的作用，這個(gè)文件夾后續(xù)還會(huì)繼續(xù)優(yōu)化袱贮。
entry
首先仿便，為了簡化開發(fā)中的重復(fù)定義，添加了pages/utils/nav.js和pages/utils/subnav.js文件攒巍。它們用來存放項(xiàng)目各頁面的路由和seo優(yōu)化所需要的信息嗽仪。代表每個(gè)頁面的結(jié)構(gòu)如下：
[
{
href: '/',
text: '首頁',
name: 'index',
meta: {
'description': '這是首頁',
'keywords': 'webpack, multi-page, 首頁',
'author': 'https://github.com/lvzhenbang/'
}
...
]
然后，根據(jù)需要新添加了一個(gè)multipage.config.js文件窑业，在這里定義了如何生成一個(gè)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'
}
}))
}
根據(jù)項(xiàng)目需要，需添加pages/utils/sprites.js文件喷市，它用來保存要合成的雪碧圖的名字相种，這個(gè)名字也是合成雪碧圖所需的圖片所在的文件夾名字。
這個(gè)文件比較簡單品姓，用來導(dǎo)出一個(gè)字符串?dāng)?shù)組寝并。
注：至于為什么只用一個(gè)字符串?dāng)?shù)組，構(gòu)建多頁面應(yīng)用——靜態(tài)資源這篇文章可以說明腹备。
引用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: ['.*']
}
])
])
}
}
當(dāng)然，你可以考慮使用webpack-merge植酥。
