webpack Loader

一、为什么使用Loader

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

二、配置属性

在 webpack 的配置中，loader 有两个属性：

1.test 属性，识别出哪些文件会被转换。
2.use 属性，定义出在进行转换时，应该使用哪个 loader。

三、loaders

baber_loader 此 package 允许你使用 Babel 和 webpack 转译 JavaScript 文件。
coffee-loader Compile CoffeeScript to JavaScript.
css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。
html-loader 将 HTML 导出为字符串。当编译器需要时，将压缩 HTML 字符串。
less-loader webpack 将 Less 编译为 CSS 的 loader。
sass-loader 加载 Sass/SCSS 文件并将他们编译为 CSS。
style-loader 把 CSS 插入到 DOM 中。
stylus-loader 一个 webpack 的 Stylus loader。将 Stylus 文件编译为 CSS。

四、开发loader

const { getOptions } = require('loader-utils') //获取options
module.exports = function(content, map, meta) {
    //正常执行顺序的loader 自下而上，自右而左
    //content：目标文件

    //异步方式
    const callback = this.async()
    setTimeout(() => {
        callback(null, content)
    }, 1000)

    return content
}
module.exports.pitch = function() {
    //逆顺序执行的loader 自上而下，自左而右
}