Webpack4 學習筆記 - 03：loader 打包靜態資源（樣式）
摘要：
使用 style-loader ， css-loader 打包 css 檔案
首先在src目錄下建立一個 index.css 檔案，內容如下：
.this_style {
color: red;
}
修改 index.js 檔案內容如下：
import '....
使用 style-loader ， css-loader 打包 css 檔案
首先在src目錄下建立一個 index.css 檔案，內容如下：
.this_style {
color: red;
}
修改 index.js 檔案內容如下：
import './index.css';
var root = document.getElementById('root');
var wp = document.createElement('div');
wp.innerText = 'Hello, Webpack';
wp.classList.add('this_style');
root.append(wp);
程式碼的內容是建立一個div，並把this_style的樣式賦給它，使它的字型變為紅色。然後直接執行 npm run bundle 來打包會報錯嗎？當然會了，因為之前說過 webpack 只能處理 js 檔案，遇到 css 檔案時，它就不知道該怎麼辦了。所以我們就配置一下 webpack.config.js 來告訴它怎麼做，配置內容如下：
const path = require('path'); // 得到的path為webpack.config.js所在的目錄
module.exports = {
entry: {
main: './src/index.js'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},
mode: 'development'
}
然後安裝 style-loader 和 css-loader ：
npm install style-loader css-loader -D
安裝完之後，執行打包命令，沒有報錯，就說明 webpack 已經正確打包好了 css 檔案。開啟 index.html 可以看到，字型的顏色已經變成了紅色：
下面大概來說一下 style-loader 和 css-loader 做了哪些工作，詳細的說明可以去看官方文件。
在src目錄下再新建一個 test.css 檔案，給 this_style 樣式加一個背景色：
.this_style {
background-color: #999999; /* 灰色 */
}
然後在 index.css 檔案中引入 test.css：
@import './test.css';
.this_style {
color: red;
}
執行打包命令，開啟 index.html 檢視結果:
打包成功, 背景色顯示了出來。
在這段打包的過程中， css-loader 會根據 css 的語法，比如 @import.. 分析出幾個 css 檔案的關係，然後把它們合併成一段 css ， style-loader 在得到 css-loader 生成的內容之後，會把這段內容新增到指定的內頁元素上，最後呈現出上圖的結果。