# loader

loader用于对模块的源代码进行转换。loader可以使你在import或"加载"模块时预处理文件。因此loader类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或将内联图像转换为data URL。loader甚至允许你直接在JavaScript模块中importCSS文件！

# 使用`loader`

配置

通过配置文件配置

内联

可以在import语句或任何等效于 "import" 的方式中指定loader。使用!将资源中的loader分开。分开的每个部分都相对于当前目录解析。

// 暴露到全局
import $ from 'expose-loader?$!jquery'
console.log(window.$)

// 也可以在配置文件中配置
// webpack.config.js
module.exports = {
    module: {
        rules: [
            {
                test: reuqire.resolve('jquery'),
                use: 'expose-loader?$'
            }
        ]
    }
}

// 再或者使用 ProvidePlugin插件，往每个模块中注入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import Styles from 'style-loader!css-loader?modules!./styles.css';

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

这会对.jade文件使用jade-loader，对.css文件使用style-loader和css-loader。

# `loader`特性

loader支持链式传递。能够对资源使用流水线(pipeline)。一组链式的loader将按照相反的顺序执行。loader链中的第一个loader返回值给下一个loader。在最后一个loader，返回webpack所预期的JavaScript。
loader可以是同步的，也可以是异步的。
loader运行在Node.js中，并且能够执行任何可能的操作。
loader接收查询参数。用于对loader传递配置。
loader也能够使用options对象进行配置。
除了使用package.json常见的main属性，还可以将普通的npm模块导出为loader，做法是在 package.json里定义一个loader字段。
插件(plugin)可以为loader带来更多特性。
loader能够产生额外的任意文件。
enforce: 'pre' | 'post'

# 常用`loader`

# babel-loader

yarn add -D @babel/core babel-loader @babel/preset-env @babel/plugin-transfrom-runtime yarn add @babel/runtime @babel/runtime-corejs3

{
    test: /\.js$/,
    use: [
        {
            loader: 'babel-loader',
            options: {
                presets: [
                    '@babel/preset-env'
                ],
                plugins: [
                    '@babel/plugin-transform-runtime',
                    {
                        corejs: 3
                    }
                ]
            }
        }
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 样式处理

css-loader：处理 @import、url() 等语句
style-loader：创建 style标签，插入到 head。
postcss-loader：配合 autoprefixer 自动补充浏览器前缀
less-loader：编译 .less 文件
sass-loader：编译 .sass 文件

# 图片/字体文件处理

url-loader：在文件大小小于指定的限制时，返回 DataURL。

options配置：

limit：限制文件大小，字节

outputPath：输出目录

publicPath：前缀（CDN）

file-loader
html-withimg-loader：解析 html 中引入的图片

将资源转换为 base64 可以减少网络请求次数，但是 base64 数据较大，如果太多的资源是 base64，会导致加载变慢。

# 自定义loader

loader模块需要导出为一个函数，并且使用Node.js兼容的JavaScript编写。通常使用npm进行管理，但是也可以将自定义loader作为应用程序中的文件。按照约定，loader通常被命名为xxx-loader（例如json-loader）。

← 配置 plugins →