在webpack中獨立拆分出 css

上一篇【在webpack中使用css】，我們學會了如何在webpack中使用css，但是安裝了 css-loader與 style-loader後，會把編譯好的css引入在Html檔案中的style tag中，並不是我們需要的，我們希望的是把css獨立拆分出來成為一隻.css檔案，然後再引入進Html裡。

所以這邊我們需要安裝extract-text-webpack-plugin：

npm install --save-dev extract-text-webpack-plugin@next

然後在webpack.config.js裡引入：

const ExtractTextPlugin = require('extract-text-webpack-plugin')

接著在module裡設定好規則：

module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: ['css-loader']
        })
      }
    ]
  }

因為css 是獨立拆分的，所以要把 style-loader拿掉。依然要在 index.js 中引入 css。

import '../css/index.css'

執行npm run deploy後我們可以看見webpack把css獨立拆分成一隻檔案，並幫我們引入在head裡：