作用
extract-text-webpack-plugin插件主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。
安装
npm i extract-text-webpack-plugin -D
使用
在webpack.config.js中进行配置
1.引入extract-text-webpack-plugin
const ExtractTextPlugin = require('extract-text-webapck-plugin')
2.在plugins中配置
plugins: [
new ExtractTextPlugin({
filename: 'style/[name].min.css' // 配置提取出来的css名称
})
]
3.在module中配置
module: {
rules: [{
test: /\.(css|less)$/,
use: ExtractTextPlugin.extract({
fallback: {
loader: 'style-loader',
options: {
singleton: true // 表示将页面上的所有css都放到一个style标签内
}
},
use: [{
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
{
loader: 'less-loader',
options: {
sourceMap: true
}
}
}]
})
}]
}