extract-text-webpack-plugin用法詳解

更新時間：2019年02月14日 08:35:48 作者：畢聰聰

這篇文章主要介紹了extract-text-webpack-plugin用法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

一背景

最近在做一個項目，項目本身是用vue-cli創(chuàng)建的單頁面應用，由于項目擴展需要創(chuàng)建多頁面，所以需要對不同的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"),
 ]
}

多實例

在實例上也有個 extract function。如果你有1個以上的 ExtractTextPlugin 的實例，你應該使用實例上的 extract。

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

// Create multiple instances
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');

module.exports = {
 module: {
 rules: [
  {
  test: /\.css$/,
  use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
  },
  {
  test: /\.less$/i,
  use: extractLESS.extract([ 'css-loader', 'less-loader' ])
  },
 ]
 },
 plugins: [
 extractCSS,
 extractLESS
 ]
};

抽取 Less 或者 Sass

配置是相同的, 根據(jù)需求使用 sass-loader 取代 less-loader。

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

module.exports = {
 module: {
 rules: [
  {
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
   fallback: 'style-loader',
   use: ['css-loader', 'sass-loader']
  })
  }
 ]
 },
 plugins: [
 new ExtractTextPlugin('style.css')
 //if you want to pass in options, you can do so:
 //new ExtractTextPlugin({
 // filename: 'style.css'
 //})
 ]
}

url() Resolving

如果你運行 webpack 發(fā)現(xiàn) urls resolve 不對。你可以使用 options 擴展 loader 功能。 url: false 使得你的路徑 resolve 的時候不會發(fā)生任何變化。

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

module.exports = {
 module: {
 rules: [
  {
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
   fallback: 'style-loader',
   use: [
   {
    loader: 'css-loader',
    options: {
     // If you are having trouble with urls not resolving add this setting.
     // See https://github.com/webpack-contrib/css-loader#url
     url: false,
     minimize: true,
     sourceMap: true
    }
   }, 
   {
    loader: 'sass-loader',
    options: {
     sourceMap: true
    }
   }
   ]
  })
  }
 ]
 }
}

改變文件名

filename 參數(shù)可以是 Function。通過傳入 getPath 去處理像 css/[name].css 的格式，返回一個真正的文件名， css/js/a.css。你可以替換 css/js 為 css，這樣你可以得到一個新的路徑 css/a.css。

entry: {
 'js/a': "./a"
},
plugins: [
 new ExtractTextPlugin({
 filename: (getPath) => {
  return getPath('css/[name].css').replace('css/js', 'css');
 },
 allChunks: true
 })
]

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: