如果采用默认配置导入css的话 打包后是这样的
css样式会被直接写入到html中去,可能会带来不必要的影响,这时候就需要把css单独分离出来
首先要安装
mini-css-extract-plugin
postcss-loader
postcss-preset-env
npm i mini-css-extract-plugin postcss-loader postcss-preset-env -D
然后配置webpack.config.js
const{resolve}=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
//引入mini-css-extract-plugin
const MiniCssExtractPlugin=require('mini-css-extract-plugin')
module.exports={
entry:'./src/js/index.js',
output:{
filename:'built.js',
path:resolve(__dirname,'build')
},
module:{
rules:[
{
test:/\.css$/,
use:[
MiniCssExtractPlugin.loader,
'css-loader',
{
loader:'postcss-loader',
options:{
ident:'postcss',
plugins:()=>{
require('postcss-preset-env')
}
}
}
]
},
{
test:/\.less$/,
use:[
MiniCssExtractPlugin.loader,
'css-loader',
{
loader:'postcss-loader',
options:{
ident:'postcss',
plugins:()=>{
require('postcss-preset-env')
}
}
},
'less-loader'
]
}
]
},
plugins:[
new MiniCssExtractPlugin({
//输出文件夹和文件名
filename:'css/built.css'
})
],
mode:'production'
}
执行的过程,use数组是从下往上执行的
{
test:/\.less$/,
use:[
/*4.最后再通过MiniCssExtractPlugin.loader
把css提取成单独的文件
*/
MiniCssExtractPlugin.loader,
//3.css-loader会把css加载到中
'css-loader',
//2.postcss-loader会对css进行兼容性处理
{
loader:'postcss-loader',
options:{
ident:'postcss',
plugins:()=>{
require('postcss-preset-env')
}
}
},
//1.首先执行less-loader,将less编译成css
'less-loader'
]
}
最后输出一个单独的css文件