歡迎來到鐵人12前哨站的第二篇文章，延續第一篇，今天要繼續介紹 webpack 的內容

首先呢，webpack 其本身僅能讀取 javascript 和 json 格式的內容，若是我們需要讓它讀取其他格式的檔案就需要透過 loader 來將讀取和使用方法餵給 webpack，先介紹基本使用方法吧

loader:
每一條規則基本上最少會需要兩個參數，透過 test 配合正則表達式告訴 webpack 要將何種檔案進行編譯，而後透過 use 告知將要使用什麼 loader，不過在使用之前，我們得先透過 npm 將檔案下載下來，下方將透過引用 css 為例：

1. 首先透過 npm 將 css-loader 和 style-loader 下載下來

npm install css-loader style-loader

2. 再來呢，進入 webpack.config.js 將規則寫進去

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.css$/i, //讀取所有檔名含有.css的檔案，不分大小寫
                use: [
                    'style-loader', //使用 style-loader
                    'css-loader' //使用 css-loader
                ]
            }
        ]
    }
}

3. 在 src 目錄內建立一個 style 資料夾，在其內創立一個 style.css 並添加一個樣式

.redText{color: red;}

4. 在 src/index.js 中將其引用進來

import './style/style.css'

5. 最後，執行編譯指令 npm run start即可看到此樣式囉

補充昨天的內容，在 webpack 中編譯主要分為兩種模式，分別為開發模式(development)和生產模式(production)，主要差異在於說生產模式下會將檔案進行壓縮，雖較不易觀看但在產品上線時問題大多都已解決，即可使用生產模式，使用方法如下

package.json
scripts: {
    "start": "webpack --mode=development",
    "build": "webpack --mode=production"
}

這樣就可以根據情況來將檔案進行編譯囉