extract-text-webpack-plugin用法详解
编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
这篇文章主要介绍了extract-text-webpack-plugin用法详解，长沙网络推广觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随长沙网络推广过来看看吧
一 背景
最近在做一个项目，项目本身是用vue-cli创建的单页面应用，由于项目扩展需要创建多页面，所以需要对不同的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
配置是相同的, 根据需求使用 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'
/