这里webpack中loader处理规则,问题,解决方法
一.webpack中loader处理规则
- 判断当前需要打包的内容是否是js
- 如果不是就去webpack.config.js中查找有没有处理这种内容的loader
- 如果没有找到对应内容的loader就报错
- 如果有处理对应内容的loader就交给对应的loader处理
注意点:处理的时候会从右向左的类似管道函数处理,直到没有loader处理就交给webpack打包
二.问题
由于less是对css进行封装,能够通过面向对象的方式设置页面样式,我们需要loader将less文件转换为css文件再依次交给css-loader,style-loader
三.解决方法
- 安装less
npm i less -D
实际部署中不需要,因为已经转换为css了,不像jquery是对js的封装,实际部署中任然需要 - 安装less-loader
npm i less-loader -D - 在index.js文件中导入less文件
import "./less/index.less" -
在webpack.config.js中配置less规则
{test:/.less$/,[style-loader,css-loader,less-loader]}