webpack(5)配置打包less和sass
1.打包less需要下载包less和less-loader：npm install less less-loader -D
2.打包sass需要下载包node-sass和sass-loader：npm install node-sass sass-loader -D
3.在（4）的基础上新增一个index.less文件：
@width:200px;
@height:200px;
@color:green;
#box1{
width: @width;
height: @width;
color: blue;
background-color:@color;
}
4.在（4）的基础上新增一个index.scss文件：
$width:200px;
$height:200px;
$color:yellow;
#box2{
width: $width;
height: $width;
color: blue;
background-color:$color;
}
5.index.html中新增下面的代码：
<div id="box1">
less box
</div>
<div id="box2">
sass box
</div>
6.index.js中添加引入新建的index.less和index.scss
require('../css/index.scss')
require('../css/index.less')
7.完整的webpack.config.js文件，里面添加less的loader和scss的loader：
const{resolve}=require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
entry:{
vender:['./src/js/jquery.js','./src/js/common.js'],
index:'./src/js/index.js',
cart:'./src/js/cart.js'
},
output:{
path:resolve(__dirname,'build'),
filename:'[name].js'
},
mode:'development',
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']},
{test:/\.less$/,use:['style-loader','css-loader','less-loader']},//less的loader
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}//scss的loader
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
chunks:['vender','index']
}),
new HtmlWebpackPlugin({
template:'./src/cart.html',
filename:'cart.html',
chunks:['vender','cart']
}),
]
}
