詳解extract-text-webpack-plugin 的使用及安裝
更新時間：2018年06月12日 09:24:25 作者：荊--棘
這篇文章主要介紹了詳解extract-text-webpack-plugin 的使用及安裝，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
extract-text-webpack-plugin該插件的主要是為了抽離css樣式,防止將樣式打包在js中引起頁面樣式加載錯亂的現(xiàn)象;首先我先來介紹下這個插件的安裝方法:
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
首先進入項目的根目錄,然后執(zhí)行以上命令進行插件的安裝,插件安裝完成后,接下來我們要做的就是在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
]
};
該插件有三個參數(shù)意義分別如下
- use:指需要什么樣的loader去編譯文件,這里由于源文件是.css所以選擇css-loader
- fallback:編譯后用什么loader來提取css文件
- publicfile:用來覆蓋項目路徑,生成該css文件的文件路徑
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家?guī)硪黄狫avaScript數(shù)組方法總結(jié)分析。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-05-05
javascript實現(xiàn)的像java、c#之類的sleep暫停的函數(shù)代碼
我們都知道java、c#、vb等語言都有sleep暫停的函數(shù)，而JavaScript腳本沒有類似的功能。2010-03-03
這篇文章主要為大家詳細介紹了js如何實現(xiàn)視頻播放時屏幕顯示水印的效果,文中的示例代碼講解詳細,對我們深入掌握js有一定的幫助,感興趣的小伙伴可以跟隨小編一起學習一下2023-10-10
在開發(fā)過程中，為了應(yīng)對多變的復雜場景，我們需要了解一下?TypeScript?的高級類型。本文就為大家整理了一些需要掌握的TypeScript高級類型，需要的可以參考一下2022-08-08
之前喜歡收集能美化網(wǎng)頁的代碼，比如給網(wǎng)頁加個背景啦，給鼠標加個特效啦，來來回回也收集到了一些“使用簡單”，“效果爆炸”的頁面，快來學習一下吧2022-04-04
在子頁面(<iframe></iframe>)創(chuàng)建父級事件！當子頁面(<iframe></iframe>)被銷毀！子頁面(<iframe></iframe>)創(chuàng)建父級事件也會被銷毀！2011-01-01
這篇文章主要介紹了微信小程序獲取用戶openid的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
JavaScript canvas實現(xiàn)代碼雨效果
這篇文章主要為大家詳細介紹了JavaScript canvas實現(xiàn)代碼雨效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了javascript包裝對象,實例分析分析了javascript對象操作的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
JavaScript時間操作之年月日星期級聯(lián)操作
這篇文章主要介紹了JavaScript時間操作之級聯(lián)日期選擇操作，涉及到年、月、日、星期，感興趣的小伙伴們可以參考一下2016-01-01