20190326 期
Webpack 有哪些常见的 Loader？他们是解决什么问题的？
在回答之前我们先来了解一下 Loader
我们在上一节讲过，webpack 是属于模块化方案，他能让任意类型的文件都能运行在浏览器中，怎么做到呢？这时就有了 loader
定义: loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 ” 加载 ” 模块时预处理文件。
没太明白? 看下示例可能更清淅
module.exports = {
module: {
rules: [
// 将所有 TypeScript 转为 JavaScript，
// 也就意味着我们使用 ts 来开发，最终转换成 js 运行在浏览器端
{test: /\.ts$/, use: ‘ts-loader’}
]
}
};
常用的 loader
这里其实没什么太大意义，无非是想请你们亲自去看看自己项目到底用了哪些 loader 而已, 下面简单列出一些
style-loader 将 css 添加到 DOM 的内联样式标签 style 里
css-loader 允许将 css 文件通过 require 的方式引入，并返回 css 代码
less-loader 处理 less
sass-loader 处理 sass
postcss-loader 用 postcss 来处理 CSS
autoprefixer-loader 处理 CSS3 属性前缀，已被弃用，建议直接使用 postcss
file-loader 分发文件到 output 目录并返回相对路径
url-loader 和 file-loader 类似，但是当文件小于设定的 limit 时可以返回一个 Data Url
html-minify-loader 压缩 HTML
babel-loader 用 babel 来转换 ES6 文件到 ES5
loader 特性
很多同学偏向于使用，不会去在意 loader 的一些小细节, 这里就顺带说一下
loader 从右到左地取值 (evaluate)/ 执行 (execute)
loader 支持链式传递, 链中的每个 loader 会将转换应用在已处理过的资源上
loader 也可以内联显示指定
loader 可以是同步的，也可以是异步的
loader 运行在 Node.js 中，并且能够执行任何 Node.js 能做到的操作
loader 可以通过 options 对象配置
除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块
loader 能够产生额外的任意文件
看了其特性后，我们再看来一组简单的 demo 进行加深印象
// 内联使用
import Styles from ‘style-loader!css-loader?modules!./styles.css’
// 下面的一组 loader 就是链式传递, 从 sass-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束
use: [
{loader: ‘style-loader’},
{
loader: ‘css-loader’,
// 通过 options 配置
options: {
modules: true,
minimize:true,
}
},
{loader: ‘sass-loader’}
]
总结
loader 是 webpack 核心, 用于对模块的源代码进行转换
loader 支持链式调用，从右至左执行，支持同步或异步函数
关于 JS 每日一题
JS 每日一题可以看成是一个语音答题社区 每天利用碎片时间采用 60 秒内的语音形式来完成当天的考题 群主在次日 0 点推送当天的参考答案
注 绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路
点击加入答题