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'
               ]
           }
       ]
   }