iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 16
0
Modern Web

使用 webpack 模組化你的程式碼,讓人生更美好。系列 第 16

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

程式碼的分離,今天要再來談談 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 的過程中,將它抽離出來。怎麼做呢?該來動手做啦。/images/emoticon/emoticon31.gif

安裝 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,敬請期待。/images/emoticon/emoticon41.gif


上一篇
<15 - 再續心法 1> Code Splitting - Using Require
下一篇
<17 - 再續心法 3> Code Splitting - Libraries
系列文
使用 webpack 模組化你的程式碼,讓人生更美好。30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言