1. Webpack属于模块化方案,它能让任意类型的文件运行在浏览器中,怎么做到呢?这时就有了 loader。
2. loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。
3. 常用的 loader 及其作用:
- style-loader:将CSS添加到DOM的内联样式标签style里
- css-loader:允许将CSS文件通过require的方式引入,并返回CSS代码
- less-loader:处理less
- sass-loader:处理sass
- postcss-loader:用postcss来处理CSS
- file-loader:分发文件到output目录并返回相对路径
- url-loader 和 file-loader 类似,但是当文件小于设定的limit时可以返回一个Data Url
- html-minify-loader:压缩HTML文件
- babel-loader:把ES6文件转换成ES5文件
4. loader 特性:
- loader 从右到左地取值(evaluate)/执行(execute)
- loader 支持链式传递
- loader 可以内联显示指定
- loader 可以是同步的,也可以是异步的
- loader 运行在 Node.js 中,并且能够执行任何 Node.js 能做到的操作
- loader 可以通过 options 对象配置
- 除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader,还可以在 module.rules 中使用 loader 字段直接引用一个模块
- loader 能够产生额外的任意文件
参考:
Webpack有哪些常见的Loader?他们是解决什么问题的?
https://www.toutiao.com/i6674400183851155982/
END