webpack 样式模块打包深入学习

1. style-loader css-loader sass-loader 分别的作用

style-loader: 将所有的样式嵌入到dom的style属性当中。

css-loader: 将css当中的 @import 和 url(...) 解析成 import / require 引入

sass-loader: 将代码sass编译成css

2. webpack的执行顺序

配置的时候顺序不能乱写，需要遵从 style-loader!css-loader!sass-loader的顺序严格执行的。

但是有一点，webpack的loader执行顺序是从右到左的。

3. style-loader!css-loader!sass-loader 合起来的作用

首先将sass编译成css,然后将 css当中的 url(...)/@import 引入方式解析成 import/ require 在js当中引入，最后将代码到相应dom的style属性下面。