構建多頁面應用——單個頁面的處理

時間 2019-11-16

標籤構建頁面應用單個處理简体版

原文原文鏈接

在看這篇文章以前，須要你對構建多頁面應用有必定的基礎認識，若是沒有的話，能夠先參考這篇文章webpack 構建多頁面應用。css

多頁面應用是由一個個獨立的頁面組成。所以，細粒度的處理一個個單頁面是構建單頁面框架以後的一個重要實現。html

由於所涵蓋的知識點較碎，因此就不按照頁面的位置結合組成元素來說，如：head, body, script等。這裏主要介紹head。由於script操做其實就是上一篇文章中已經介紹過的js操做，而body由於內容較多，須要另起一篇文章。前端

頁面的頭部

在上一篇文章中，咱們講述瞭如何用html-webpack-plugin 生成一個html文件，其中使用了兩個配置項chunks，filename，前者指代頁面所要引入的js模塊，也就是咱們常見的html頁面中的<script src="..."></script>形式，後者指代文件的名字。webpack

那麼，在這一部分，要說的就是如何給不一樣的頁面配置生成不一樣的頁面<head>...</head>。咱們都知道頁面頭部包括title、link/style、meta、script 這四部分組成，尤爲前三者居多。git

固然，在web前端開發中js很強大，咱們能夠用js直接控制，在不一樣頁面的入口js文件中寫相應的js代碼。github

這種方法雖然可行，但維護起來比較麻煩，當你修改的時候，你須要查找一個個頁面。web

相對來說，使用html-webpack-plugin提供的配置項，會使你的開發工做變得簡單起來。json

`html-webpack-plugin` 插件的配置項

title 選項能夠爲頁面指定名字，meta 選項能夠爲頁面指定html文檔關聯信息，如：描述，做者等，favicon 能夠爲頁面添加一個小圖標。修改 webpack.config.js，代碼以下：segmentfault

...
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 處理內聯樣式。

注：不少人會誤解，或曲解，這裏的樣式處理是這樣的：在定義的頁面入口文件，或者頁面入口文件引用的文件中，引入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模塊，則過於細化。

至於如何取捨，還須要根據實際狀況來定。

固然，這裏面還有一些小的問題須要優化，後期我會視狀況來寫相應的文章描述。