extract-text-webpack-plugin用法

wangtdgoodluck 發(fā)布于2019-08-23 15:10 / 2316人閱讀

摘要：一背景最近在做一個(gè)項(xiàng)目，項(xiàng)目本身是用創(chuàng)建的單頁(yè)面應(yīng)用，由于項(xiàng)目擴(kuò)展需要?jiǎng)?chuàng)建多頁(yè)面，所以需要對(duì)不同的分別進(jìn)行文件打包。于是開始研究插件。僅限高級(jí)用法默認(rèn)情況下，自動(dòng)生成結(jié)果文件的文件名。

一背景
最近在做一個(gè)項(xiàng)目，項(xiàng)目本身是用vue-cli創(chuàng)建的單頁(yè)面應(yīng)用，由于項(xiàng)目擴(kuò)展需要?jiǎng)?chuàng)建多頁(yè)面，所以需要對(duì)不同的html分別進(jìn)行css文件打包。于是開始研究extract-text-webpack-plugin插件。
二插件介紹
打包樣式有兩種方法，一種是使用style-loader自動(dòng)將css代碼放到生成的style標(biāo)簽中，并且插入到head標(biāo)簽里。另一種就是使用extract-text-webpack-plugin插件，將樣式文件多帶帶打包，打包輸出的文件由配置文件中的output屬性指定。然后我們?cè)谌肟贖TML頁(yè)面寫個(gè)link標(biāo)簽引入這個(gè)打包后的樣式文件。
三插件使用
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來(lái)提取css文件
          use: "css-loader" // 指需要什么樣的loader去編譯文件,這里由于源文件是.css所以選擇css-loader
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

四 API

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

id此插件實(shí)例的唯一標(biāo)識(shí)。（僅限高級(jí)用法;默認(rèn)情況下，自動(dòng)生成）

filename結(jié)果文件的文件名?？赡馨琜name]，[id]和[contenthash]。
[name] 塊的名稱
[id] 塊的標(biāo)識(shí)
[contenthash] 提取文件內(nèi)容的哈希值

options

allChunks 從所有其他塊中提?。J(rèn)情況下，它僅從初始?jí)K中提?。?/p>

disable 禁用插件

ExtractTextPlugin.extract([notExtractLoader], loader, [options]
從現(xiàn)有加載器創(chuàng)建提取加載器。

notExtractLoader（可選）在未提取css時(shí)應(yīng)使用的加載程序（即在其他塊中時(shí)allChunks: false）

loader 應(yīng)該用于將資源轉(zhuǎn)換為css導(dǎo)出模塊的加載器。

options
publicPath覆蓋publicPath此加載程序的設(shè)置。

五擴(kuò)展
該實(shí)例其實(shí)還有一個(gè)擴(kuò)展函數(shù)。如果你有多個(gè)ExtractTextPlugin，你應(yīng)該使用它。

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
  ]
};