webpack配置加载less样式文件

webpack.config.js

//webpack依赖node环境，所以写commonjs模块化语法，项目中可以正常使用es6模块化语法，webpack会解析

npm i less-loader -D //下载lessloader为开发依赖，注意版本冲突

npm i less -D

module.exports = {
　　...，
　　module: {
　　　　rules: [
　　　　　　{
　　　　　　　　test: /\.less$/, //正则匹配.less文件
　　　　　　　　use: [ //数组中从后向前依次加载
　　　　　　　　　　　　'style-loader', //创建style标签，将js中存的字符串样式插入，然后挂载到head中
　　　　　　　　　　　　'css-loader', //将css加载成commjs模块存入js中，内容为样式字符串
　　　　　　　　　　　　'less-loader' //less解析成css，依赖less和less-loader（较高版本的less-loader不需要再手动安装less）
　　　　　　　　]
　　　　　　}
　　　　]
　　}
}