开发者学堂课程【前端自动化构建工具 Webpack:快速学习 loader - 分析webpack 调用第三方 loader 的过程】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/587/detail/8217
loader - 分析webpack 调用第三方 loader 的过程
调用 loader
webpack 打包时会先建一个文件类型,如果是 js文件会直接打包,非 js 文件会先写后缀名去 webpack.config.js 找对应的匹配规则,调用规则进行打包,找不到就会报错
{ test
:/ \.css$/,use:['style-loader','css-loader']},
//
先调用css-loader
再调用style-loader
调用顺序是 从右向左调用
注意:webpack 处理第三方文件类型的过程:
1.发现这个要处理的文件不是 js 文件然后去配置文件中查找有没有对应的第三方 loader 规则
2.如果能找到对应的规则,就会调用对应的 loader 处理这种文件
3.在调用 loader 规则的时候,是从后往前调用的
4.当最后一个 loader 调用完毕会把处理的结果直接交给 webpack 进行打包合并,最终输出到 bundle.js 中去