<16 - 再續心法 2> Code Splitting - CSS

2017鐵人賽 carlos chang webpack

Carlos Chang

2016-12-16 01:55:46

2738 瀏覽

分享至

程式碼的分離，今天要再來談談 css 的部份，要先來回顧一下 ./app/index.js 檔案，有一行是這個：

…
require("./file.css");
…

如果有點忘了，請複習一下這篇文章：<06 - 心法3 - 強化> Loaders - 示範 css-loader 與 style-loader。

有一個結論是 ./file.css 會與 ./app/index.js bundle 在同一個檔案，這會造成css會在 index.js執行完後，才被插入到 <head> 區段，若檔案很大的話，有可能畫面會從未樣式化的內容，瞬間變成樣式化後的畫面過程。若遇到這樣的狀況，可以考慮將 css 在 bundle 的過程中，將它抽離出來。怎麼做呢？該來動手做啦。

安裝 `extract-text-webpack-plugin`

先找一下可適用於 webpack 2.x 版本以上的 extract-text-webpack-plugin 版本：

$ npm view extract-text-webpack-plugin versions --json

// 取得結果為 "2.0.0-beta.4"：
[
  …
  "0.9.1",
  "1.0.0",
  "1.0.1",
  "2.0.0-beta.0",
  "2.0.0-beta.1",
  "2.0.0-beta.2",
  "2.0.0-beta.3",
  "2.0.0-beta.4"
]

$ npm install extract-text-webpack-plugin@2.0.0-beta.4 --save-dev

注意不能使用 extract-text-webpack-plugin 1.x 的版本，因為我一開始就裝 1.x 的版本，想說應該不會有問題，但 1.x 的版本會導致後續的練習會有 Error 發生喔，所以務必安裝 2.x 以上的版本。

修改 `webpack.config.js` 檔

最上方新增這行：

var ExtractTextPlugin = require("extract-text-webpack-plugin");

原來的這區塊：

…
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader'},
          {
            loader: 'css-loader',
            options: {
              modules: false
            }
          }
        ]
      }
…

改成：

…
      {
        test: /\.css$/,
        loader:  ExtractTextPlugin.extract({
          loader: 'css-loader',
        })
      }
…

plugins 區塊新增以下的 new ExtractTextPlugin 區域：

…
  plugins: [
    …
    new ExtractTextPlugin({
      filename: "[name].bundle.css",
      allChunks: true,
    }),
  ]
…

設定檔修改完畢，這時再執行 webpack 指令，就可以看到新產生的 ./dist/app.bundle.css 檔了，這個檔會是跟 ./app/file.css 檔一樣的內容。

修改 `./app/index.html`

這時修改 ./app/index.html 來載入css檔，如下：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack demo</title>
    <script src="dist/vendors.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="dist/app.bundle.css">
  </head>
  <body>
    <script src="dist/app.js" type="text/javascript"></script>
  </body>
</html>

以上就是透過 extract-text-webpack-plugin 來達成將 css 檔，在 bundle 的過程中，抽離出來的過程。

其實這次在安裝 extract-text-webpack-plugin 以及設定的使用上花了很多時間，主要是 webpack 2.x 的語法找了有點久，也特別在此記錄，以免以後忘了。

今天就到這邊啦~感謝，明天再請繼續收到下個心法 Code Splitting - Libraries，敬請期待。