extract-text-webpack-plugin用法

一 背景
最近在做一個項目，項目本身是用vue-cli創建的單頁面應用，由於項目擴展需要創建多頁面，所以需要對不同的html分別進行css文件打包。於是開始研究extract-text-webpack-plugin插件。
二 插件介紹
打包樣式有兩種方法，一種是使用style-loader自動將css代碼放到生成的style標籤中，並且插入到head標籤裏。另一種就是使用extract-text-webpack-plugin插件，將樣式文件單獨打包，打包輸出的文件由配置文件中的output屬性指定。然後我們在入口HTML頁面寫個link標籤引入這個打包後的樣式文件。
三 插件使用
1 插件安裝：

# for webpack 3 
npm install --save-dev extract-text-webpack-plugin
# for webpack 2 
npm install --save-dev [email protected]
# for webpack 1 
npm install --save-dev [email protected]

2 插件使用
在webpack.config.js中引入

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader", // 編譯後用什麼loader來提取css文件
          use: "css-loader" // 指需要什麼樣的loader去編譯文件,這裏由於源文件是.css所以選擇css-loader
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}