# loader

loader用于对模块的源代码进行转换。loader可以使你在import或"加载"模块时预处理文件。因此loader类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader可以将文件从不同的语言(如TypeScript)转换为JavaScript,或将内联图像转换为data URLloader甚至允许你直接在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';
1
  • CLI
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
1

这会对.jade文件使用jade-loader,对.css文件使用style-loadercss-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:处理 @importurl() 等语句

  • 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)。