extract-text-webpack-plugin用法

weixin_34253539發表於2019-02-13
WebPlugin

一 背景
最近在做一個專案，專案本身是用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
  ]
};

相關文章