ExtractTextPlugin是什麼
来源:9-5 webpack如何抽离压缩css文件
齊帥
2021-07-13 17:15:23
老師請問使用extract-text-webpack-plugin也可以處理CSS的問題嗎?這個方法又是甚麼呢?
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module: {
rules: [
//react(jsx)語法的處理
{
test: /\.m?jsx$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react']
}
}
},
//css文件的處理
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
//sass文件的處理
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
//圖片的配置
{
test: /\.(png|jpg|gif)$/i,
use: [{
loader: 'url-loader',
options: {
limit: 8192,
name: 'resource/[name].[ext]'
},
}, ],
},
//字體圖標的配置
{
test: /\.(eot|svg|ttf|woff|woff2|otf)$/i,
use: [{
loader: 'url-loader',
options: {
limit: 8192,
name: 'resource/[name].[ext]'
},
}, ],
},
]
},
plugins: [
//處理html文件
new HtmlWebpackPlugin({
template: './src/index.html',
favicon: './favicon.ico'
}),
//獨立css文件
new ExtractTextPlugin("css/[name].css"),
//提出公共模塊
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'js/base.js'
})
],
1回答
同学你好,对于你的问题解答如下:
1、extract-text-webpack-plugin 与当前视频中讲解的mini-css-extract-plugin插件是功能类似。
2、因为webpack4+版本不再支持extract-text-webpack-plugin这个插件,使用mini-css-extract-plugin插件来替代它,所以可以简单的理解为mini-css-extract-plugin是extract-text-webpack-plugin升级版。
两者之间的差别,结合官网介绍简单了解下即可,如下:
综上可知:
webpack4以上的版本,需要使用mini-css-extract-plugin抽离css文件
webpack4以下的版本,需要使用extract-text-webpack-plugin抽离css文件
祝学习愉快~
相似问题