webpack 样式模块打包深入学习

Posted 无情码字员

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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属性下面。

以上是关于webpack 样式模块打包深入学习的主要内容,如果未能解决你的问题,请参考以下文章

深入node学习2 实现commonjs

深入理解 webpack 文件打包机制

VUE学习笔记:17.模块化开发之webpack打包less文件

webpack--》webpack底层深入讲解,从初识到精通,真正实现从0到1的过程

深入学习webpack

[js高手之路]深入浅出webpack系列1-安装与基本打包用法和命令参数