程式碼的分離,今天要再來談談 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
,敬請期待。