提取CSS文件
通常以后两种方式:
extract-loader
ExtractTextWebpackPlugin(主流提取css文件)
安装:npm install extract-text-webpack-plugin webpack --save-dev
extract-text-webpack-plugin还不能支持webpack4.0.0以上的版本。
解决方案:
npm install --save-dev extract-webpack-plugin@next
module: {
rules:[
{
test:/\.less$/,
use:ExtractTextWepackPlugin.extract({
fallback: {
// loader:'style-loader'
// loader:'style-loader/url'
// loader:'style-loader/useable'
loader:'style-loader',
options:{
// insertInto:'#app',
singleton:true,
transform:'./css.transform.js'
}
},
use:[
{
loader:'css-loader',
options:{
// minimize:true,
modules:true,
localIdentName:'[path][name]_[local]_[hash:base64:5]'
}
// loader:'file-loader'
},
{
loader:'less-loader'
}
]
})
}
]
},
plugins:[
new ExtractTextWepackPlugin({
filename:'[name].min.css',
allChunks:false //指定一个提取css范围
})
]
}
allChunks:true/false
是否抽取其他附加的 chunks 里的style (默认只会抽取原始的 chunks, 当使用 CommonsChunkPlugin 时, 在 commons chunk 里面也有通过 ExtractTextPlugin.extract 抽取的 chunks, allChunks 必须设置成 true).
网友评论