在看這篇文章之前，需要你對 建構多頁面應用
。
多頁面應用是由一個個獨立的頁面組成。是以，細粒度的處理一個個單頁面是
建構單頁面架構
之後的一個重要實作。
因為所涵蓋的知識點較碎，是以就不按照頁面的位置結合組成元素來講，如：head, body, script等。這裡主要介紹head。因為script操作其實就是上一篇文章中已經介紹過的js操作，而body因為内容較多，需要另起一篇文章。
頁面的頭部
在
上一篇文章中，我們講述了如何用
html-webpack-plugin
生成一個html檔案，其中使用了兩個配置項
chunks
，
filename
，前者指代頁面所要引入的js子產品，也就是我們常見的html頁面中的
<script src="..."></script>
形式，後者指代檔案的名字。
那麼，在這一部分，要說的就是如何給不同的頁面配置生成不同的頁面
<head>...</head>
。我們都知道頁面頭部包括
title
、
link/style
meta
script
這四部分組成，尤其前三者居多。
當然，在web前端開發中js很強大，我們可以用js直接控制，在不同頁面的入口js檔案中寫相應的js代碼。
這種方法雖然可行，但維護起來比較麻煩，當你修改的時候，你需要查找一個個頁面。
相對來講，使用
html-webpack-plugin
提供的配置項，會使你的開發工作變得簡單起來。
html-webpack-plugin
html-webpack-plugin
title
選項可以為頁面指定名字，
meta
選項可以為頁面指定html文檔關聯資訊，如：描述，作者等，
favicon
可以為頁面添加一個小圖示。 修改
webpack.config.js
，代碼如下：
...
nnew HtmlWebapckPlugin({
/* inital page */
filename: 'index.html',
chunks: ['index'],
/* page head */
title: 'index',
meta: {
'description': '這是首頁',
'keywords': 'webpack, multi-page, 首頁',
'author': 'https://github.com/lvzhenbang/
},
favicon: './assets/19884132.jpg'
})
...
這樣頭部常用的三個元素我們已經解決了兩個。那麼接下來就是解決
link
這個元素的。
注：有一個比較特殊的就是html頁面圖示
<link rel="shortcut icon" href="19884132.jpg">
，我們使用
html-webpack-plugin
插件的
favicon
選項已經解決。
link
style
link
style
這兩個元素常常被用來處理樣式。
link
處理外部樣式，
style
處理内聯樣式。
注：很多人會誤解，或曲解，這裡的樣式處理是這樣的：在定義的頁面入口檔案，或者頁面入口檔案引用的檔案中，引入css檔案，webapck會将這些樣式以内聯的形式或者
link
的形式注入到生成的html頁面中。
這樣我們的應用的目錄結構就變成如下這樣（本片文章使用如下的目錄結構，它也介紹了各個js檔案對css檔案的引用）：
├── src
│ ├── common // 公用的子產品
│ │ ├── a.js // 引用了a.css
│ │ ├── b.js // 引用了b.css
│ │ ├── c.js // 引用了c.css
│ │ ├── d.js
├── assets // 靜态資源
│ ├── 19224132.jpg // 用來做頁面圖示
│ ├── css
│ │ ├── a.css
│ │ ├── b.css
│ │ ├── c.css
│ │ ├── main.css
│ │ ├── abutus.css
│ ├── uttils // 工具
│ │ ├── load.js // 工具代碼load.js
│ ├── index.js // 主子產品index.js (包含a.js, b.js, c.js, d.js)，引用了main.css
│ ├── aboutUs.js // 主子產品aboutus.js (包含a.js, b.js)，引用了main.css, aboutus.css
│ ├── contactUs.js // 主子產品contactus.js (包含a.js, c.js)，引用了main.css
├── webpack.config.js // css js 和圖檔資源
├── package.json
├── yarn.lock
處理為内聯樣式
如果是webpack3.x 推薦使用
css-loader
style-loader
extract-text-webpack-plugin
；如果是webapck4.x推薦使用的
css-loader
,
mini-css-extract-plugin
webpack3.x與webapck4.x都一樣，修改
webpack.config.js
如下：
...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
...
因為
mini-css-extract-plugin
是專門為webpack4.x設計的，如果webapck3.x使用它會報錯。
處理為外部連結（link）
webpack3.x中
webpack.config.js
修改如下：
...
const ExtractTextPlugin = require('extract-text-webapck-plugin')
...
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
plugins: [
...
new ExtractTextPlugin({
filename: '[name].css'
})
]
webpack4.x中
webpack.config.js
...
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
},
plugins: [
...
MiniCssExtractPlugin()
],
從js檔案中分離出css檔案，webpack3.x借助于
extract-text-webpack-plugin
，webpack4.x借助于
mini-css-extract-plugin
，前者給不同的css代碼塊命名需要在
extract-text-webapck-plugin
的示例中配置，它使用的是内置的
CommonsChunkPlugin
插件的拆分原則，後者不需要配置分離css代碼塊的名字選項，後者借助于
SplitsChunkPlugin
插件的拆分原則。
是以，它們的分離形式與js代碼塊一緻。
webpack3.x為每個入口點生成了一個css檔案，并提取了它們的公共代碼生成了一個新的css檔案；webapck4.x為每個入口生成了一個css檔案，并提取并生成了這些檔案互相之間的公共檔案（它和前者不同，後者更精細化，隻要是某一個或者幾個檔案有公共代碼就提取出來，然後生成新的檔案）。
為什麼将css檔案和js檔案分的這麼細？是因為這樣可以顯著的減小首次加載頁面時請求檔案的大小（lazyload），但是這樣做會增加HTTP的請求次數。
在多頁面應用的過程中，有的人喜歡将所有的css放在一個或兩個檔案中，而不是像本文中那樣為每個頁面生成一個css檔案，包括它們之間的共用檔案。但在多頁面應用中，這樣精密的細分也有其好處。
相對來說，使用
CommonsChunkPlugin
拆分的css子產品更合理些，而使用
SplitsChunkPlugin
拆分的css子產品，則過于細化。
至于如何取舍，還需要根據實際情況來定。
當然，這裡面還有一些小的問題需要優化，後期我會視情況來寫相應的文章描述。
源代碼
webpack3.x multi-page webpack4.x multi-page建構多頁面應用系列文章
來源：
https://segmentfault.com/a/1190000017418953![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)