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 extract-text-webpack-plugin@2.1.2
# for webpack 1 
npm install --save-dev extract-text-webpack-plugin@1.0.1

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"),
  ]
}

四 API

new ExtractTextPlugin([id: string], filename: string, [options])

1. id此插件實例的惟一標識。（僅限高級用法;默認狀況下，自動生成）
2. filename結果文件的文件名。可能包含[name]，[id]和[contenthash]。
   [name] 塊的名稱
   [id] 塊的標識
   [contenthash] 提取文件內容的哈希值
3. options

• allChunks 從全部其餘塊中提取（默認狀況下，它僅從初始塊中提取）
• disable 禁用插件

ExtractTextPlugin.extract([notExtractLoader], loader, [options]
從現有加載器建立提取加載器。

1. notExtractLoader（可選）在未提取css時應使用的加載程序（即在其餘塊中時allChunks: false）
2. loader 應該用於將資源轉換爲css導出模塊的加載器。
3. options
   publicPath覆蓋publicPath此加載程序的設置。

五 擴展
該實例其實還有一個擴展函數。若是你有多個ExtractTextPlugin，你應該使用它。

let ExtractTextPlugin = require('extract-text-webpack-plugin');

// multiple extract instances
let extractCSS = new ExtractTextPlugin('stylesheets/[name].css');
let extractLESS = new ExtractTextPlugin('stylesheets/[name].less');

module.exports = {
  ...
  module: {
    loaders: [
      {test: /\.scss$/i, loader: extractCSS.extract(['css','sass'])},
      {test: /\.less$/i, loader: extractLESS.extract(['css','less'])},
      ...
    ]
  },
  plugins: [
    extractCSS,
    extractLESS
  ]
};