詳解extract-text-webpack-plugin 的使用及安裝

更新時(shí)間：2018年06月12日 09:24:25 作者：荊--棘

這篇文章主要介紹了詳解extract-text-webpack-plugin 的使用及安裝，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

extract-text-webpack-plugin該插件的主要是為了抽離css樣式,防止將樣式打包在js中引起頁(yè)面樣式加載錯(cuò)亂的現(xiàn)象;首先我先來(lái)介紹下這個(gè)插件的安裝方法:

npm install extract-text-webpack-plugin --save-dev

# for webpack 2
npm install --save-dev extract-text-webpack-plugin
# for webpack 1
npm install --save-dev extract-text-webpack-plugin@1.0.1

首先進(jìn)入項(xiàng)目的根目錄,然后執(zhí)行以上命令進(jìn)行插件的安裝,插件安裝完成后,接下來(lái)我們要做的就是在webpack.config.js中引入該插件

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

module.exports = {
 module: {
  rules: [
   {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
     fallback: "style-loader",
     use: "css-loader"
    })
   }
  ]
 },
 plugins: [
  new ExtractTextPlugin("styles.css"),
 ]
}

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

該插件有三個(gè)參數(shù)意義分別如下

use:指需要什么樣的loader去編譯文件,這里由于源文件是.css所以選擇css-loader
fallback:編譯后用什么loader來(lái)提取css文件
publicfile:用來(lái)覆蓋項(xiàng)目路徑,生成該css文件的文件路徑

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript數(shù)組方法總結(jié)分析
下面小編就為大家?guī)?lái)一篇JavaScript數(shù)組方法總結(jié)分析。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考
2016-05-05
javascript實(shí)現(xiàn)的像java、c#之類(lèi)的sleep暫停的函數(shù)代碼
我們都知道java、c#、vb等語(yǔ)言都有sleep暫停的函數(shù)，而JavaScript腳本沒(méi)有類(lèi)似的功能。
2010-03-03
js實(shí)現(xiàn)視頻播放時(shí)屏幕顯示水印
這篇文章主要為大家詳細(xì)介紹了js如何實(shí)現(xiàn)視頻播放時(shí)屏幕顯示水印的效果,文中的示例代碼講解詳細(xì),對(duì)我們深入掌握js有一定的幫助,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-10-10
你需要知道的TypeScript高級(jí)類(lèi)型總結(jié)
在開(kāi)發(fā)過(guò)程中，為了應(yīng)對(duì)多變的復(fù)雜場(chǎng)景，我們需要了解一下?TypeScript?的高級(jí)類(lèi)型。本文就為大家整理了一些需要掌握的TypeScript高級(jí)類(lèi)型，需要的可以參考一下
2022-08-08
基于JS實(shí)現(xiàn)十種酷炫的網(wǎng)頁(yè)特效
之前喜歡收集能美化網(wǎng)頁(yè)的代碼，比如給網(wǎng)頁(yè)加個(gè)背景啦，給鼠標(biāo)加個(gè)特效啦，來(lái)來(lái)回回也收集到了一些“使用簡(jiǎn)單”，“效果爆炸”的頁(yè)面，快來(lái)學(xué)習(xí)一下吧
2022-04-04
javascript 事件綁定問(wèn)題
在子頁(yè)面(<iframe></iframe>)創(chuàng)建父級(jí)事件！當(dāng)子頁(yè)面(<iframe></iframe>)被銷(xiāo)毀！子頁(yè)面(<iframe></iframe>)創(chuàng)建父級(jí)事件也會(huì)被銷(xiāo)毀！
2011-01-01
微信小程序獲取用戶(hù)openid的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序獲取用戶(hù)openid的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
JavaScript canvas實(shí)現(xiàn)代碼雨效果
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)代碼雨效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
javascript包裝對(duì)象實(shí)例分析
這篇文章主要介紹了javascript包裝對(duì)象,實(shí)例分析分析了javascript對(duì)象操作的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
JavaScript時(shí)間操作之年月日星期級(jí)聯(lián)操作
這篇文章主要介紹了JavaScript時(shí)間操作之級(jí)聯(lián)日期選擇操作，涉及到年、月、日、星期，感興趣的小伙伴們可以參考一下
2016-01-01