Webpack核心loader (三）—— 处理less

less:

1.less

2.less-loader

安装：cnpm i less less-loader -D

index.js入口文件引入：
import '../less/index.less';

src下新建less文件，index.less
@w:120px;
@border:1px solid #000;

#box{
   width: @w;
  border:@border;
    ul {
        margin: 0;
        padding:0;
        list-style: none;
     
        li{
            height: 30px;
            background: green;

        }
    }

}

webpack.config.js文件配置：

module:{
       rules:[//对象
           //这里面放的就是一个个的loader,每一个loader要放在一个对象里,这里面的内容不能变，从后往前解析
           {
               test:/\.less$/,
               use:[
                   {
                
                    //loader是可以进行参数的配置的，如果需配置的话就必须放再一个对象当中
                    loader:MiniCssExtractPlugin.loader,
                    options:{
                         publicPath: '../',
                    }
               },
               'css-loader',
                'less-loader'
               ]
           }
       ]
   }