CSS Loader

Posted on | In

如何透過Webpakc去讀取非JS的檔案，如CSS、HTML、Images…
=>>>>>> loader

Loader

  1. 讀取解析除了JS以外的檔案
  2. 讀取順序都是由後面執行到前面的，ex: [‘style-loader(第二)’, ‘css-loader (先)’]
  3. Module: 是用來提取非js會用到的功能

用webpack讀取、運用CSS

以下分成拆分出CSS與注入JS兩種方式

注入JS

Step 1: 安裝 CSS-Loader 和 Style-Loader

1
npm install  --save-dev  css-loader   style-loader

Step 2: 建立css 檔案, 且於index.js載入

1
import './index.css';

Step 3: 設定webpack.config.js

1
2
3
4
5
6
module: {
   rules: [{
     test: /\.css$/,
     use: ['style-loader', 'css-loader'] // css-loader 讀去css / style-loader 注入JS
   }]
 }

拆分CSS

想將CSS獨立出來時，就需要使用Plugin.
什麼是plugin, 就是解決loader做不到的事情
使用了plugin就不需要style-loader

Step 1: extract-text-webpack-plugin

1
2
3
npm install --save-dev extract-text-webpack-plugin@next

!! webpack4 支援的版本目前是beta版，所以要加@next

Step 2: extract-text-webpack-plugin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// module.exports 前
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('css/[name].css');

// module.exports 裡
module: {
  rules:[
    ...
    {
      test: /\.css$/, // 讀取這個副檔名
      use: extractCSS.extract([
        'css-loader',
        'postcss-loader'
      ]) // Loader 的順序都是由後面執行到前面的, 所以會先使用css-loader, 再使用style-loader
    },
    ..
  ]
},
plugins: [
  extractCSS
]