構建多頁面應用——優化（一）
構建多頁面應用的過程中，需要優化代碼的結構。而優化代碼的結構，往往會使用函數化編程。可參考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
構建多頁面應用系列文章
- 構建多頁面應用
- 構建多頁面應用——單個頁面的處理
- 構建多頁面應用——模板
- 構建多頁面應用——靜態資源構建多頁面應用的過程中，需要優化代碼的結構。而優化代碼的結構，往往會使用函數化編程。可參考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
構建多頁面應用系列文章
- 構建多頁面應用
- 構建多頁面應用——單個頁面的處理
- 構建多頁面應用——模板
- 構建多頁面應用——靜態資源
推薦閱讀：
