extract-text-webpack-plugin 的安裝及配置

extract-text-webpack-plugin 的安裝及配置
extract-text-webpack-plugin該插件的主要是為了抽離css樣式,防止將樣式打包在js中引起頁面樣式加載錯亂的現象
一、安裝

# 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

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

參數

use: 指需要什麼樣的loader去編譯文件,這裏由於源文件是.css所以選擇css-loader

fallback: 編譯後用什麼loader來提取css文件

publicfile:用來覆蓋項目路徑,生成該css文件的文件路徑