执行顺序问题

来源:3-3 使用 Loader 打包静态资源(样式篇 - 上)

梦无涯1978

2019-02-27

请问老师,这一小节执行打包命令后的执行流程,我下面的理解大概对吗?
执行的大概流程:

  1. 执行打包命令
  2. webpack匹配到scss样式文件
  3. 借助sass-loader打包
  4. 打包好的scss样式转给css-loader转译
  5. 转好的样式交给postcss-loader并借助autoprefixer插件自动添加相应的厂商前缀
  6. 添加好前缀的样式转给style-loader挂载到dom上的style里
写回答

3回答

Dell

2019-02-27

理解的很正确

0
2
renderman
loader数组不是自下而上的吗,顺序应该是postcssloader、sasslaoder、cssloader、styleloader吧
2019-02-28
共2条回复

脑阔疼

2019-02-28

  1. 执行打包命令

  2. webpack匹配到scss样式文件   (test:/\.scss$/ 匹配到样式文件)

  3. 借助sass-loader打包  (解析成 css)

  4. 将sass-loader处理过的css样式转给post-loader转译  (css加浏览器前缀等, postcss 支持比较新的样式书写方法 比如 花括号嵌套等,所以可以放在sass-loader前面 )
    //img.mukewang.com/szimg/5c776c6b0001697608860408.jpg

  5. 加好前缀的样式转给css-loader转译   (@import 处理配置) 输出css代码

  6. css代码转给style-loader挂载到dom上的style里  (将css代码挂载到页面,是<style></style>标签形式挂载到页面里,而不是dom的style属性。)  


2
0

脑阔疼

2019-02-28

//img.mukewang.com/szimg/5c776dab0001a5fc09040583.jpg
loader 顺序在官网找到了一个代码片段 可以看到是先处理 sass  


0
0

从基础到实战 手把手带你掌握新版Webpack4.0

知识点+项目实例+原理讲解 全方位解析Webpack4新版本

3627 学习 · 1291 问题

查看课程