执行顺序问题

Question

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

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

Answer 1

Dell 2019-02-27 17:58:15

理解的很正确

• 提问者 梦无涯1978 #1

  非常感谢！

• renderman #2

  loader数组不是自下而上的吗，顺序应该是postcssloader、sasslaoder、cssloader、styleloader吧

Answer 2

脑阔疼 2019-02-28 13:09:13

1. 执行打包命令

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

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

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

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

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

Answer 3

脑阔疼 2019-02-28 13:13:13

loader 顺序在官网找到了一个代码片段 可以看到是先处理 sass