這篇文章主要介紹了詳解extract-text-webpack-plugin 的使用及安裝，內容挺不錯的，現在分享給大家，也給大家做個參考。
extract-text-webpack-plugin該插件的主要是為了抽離css樣式,防止將樣式打包在js中引起頁面樣式加載錯亂的現象;首先我先來介紹下這個插件的安裝方法:
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
首先進入專案的根目錄,然後執行以上指令進行插件的安裝,外掛程式安裝完成後,接下來我們要做的就是在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
]
};該外掛程式有三個參數意義分別如下
以上是關於extract-text-webpack-plugin 的使用及安裝的詳細內容。更多資訊請關注PHP中文網其他相關文章！
