2019-07-04

语言►nodejs►库►webpack

webpack中的file-loader

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/07/04/webpack%E4%B8%AD%E7%9A%84file-loader/

摘要

本文主要讲述了：

作用
配置
示例

正文

作用

将引入的文件解析为 URL，并将文件复制到构建目录，以便于 webpack 打包。

配置

name

文件名。

默认值为[hash].[ext]。

此处的[hash]、[ext]是name属性的占位符。

常见的占位符有以下 4 种：

[ext] 表示文件的扩展名
[name] 表示文件的名称
[path] 表示文件路径
[hash] 表示文件的哈希值，默认是md5

示例：

learn_webpack/webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[hash].[ext]',
            },
          },
        ],
      },
    ],
  },
};

learn_webpack/src/index.js

1	import point from './img/point.png';

运行：

1
2
3

#!/usr/bin/env bash

npm webpack

相当于

文件会被复制到learn_webpack/dist/。
文件的名称会被修改为 hash 校验值，扩展名保持不变。
在learn_webpack/dist/main.js中使用URL引入文件。

outputPath

相对于webpack.config.js中output属性的路径。

示例：

learn_webpack/webpack.config.js

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js',
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'img',
            },
          },
        ],
      },
    ],
  },
};

learn_webpack/src/index.js

1	import point from './img/point.png';

运行：

1
2
3

#!/usr/bin/env bash

npm webpack

相当于

文件会被复制到learn_webpack/dist/img/。
文件的名称会被修改为 hash 校验值，扩展名保持不变。
在learn_webpack/dist/main.js中使用URL引入文件。

publicPath

给文件 URL 添加公共前缀。

示例：

learn_webpack/webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              publicPath: 'https://jsweibo.github.io',
            },
          },
        ],
      },
    ],
  },
};

learn_webpack/src/index.js

1	import point from './img/point.png';

运行：

1
2
3

#!/usr/bin/env bash

npm webpack

相当于

文件会被复制到learn_webpack/dist/img/。
文件的名称会被修改为 hash 校验值，扩展名保持不变。
在learn_webpack/dist/main.js中使用URL引入文件。
在learn_webpack/dist/main.js中，文件的 URL 会被加上https://jsweibo.github.io的前缀。

emitFile

输出时是否复制文件到构建目录。

示例：

learn_webpack/webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              emitFile: false,
            },
          },
        ],
      },
    ],
  },
};

learn_webpack/src/index.js

1	import point from './img/point.png';

运行：

1
2
3

#!/usr/bin/env bash

npm webpack

相当于

文件不会被复制到learn_webpack/dist/img/。
在learn_webpack/dist/main.js中使用URL引入文件。

regExp

指定一个正则表达式来匹配文件路径。

在name属性里使用[N]占位符，可以复用第N个捕获型分组所的匹配结果。

示例：

learn_webpack/webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              regExp: /\/([a-z0-9]+)\/[a-z0-9]+\.png$/,
              name: '[1]-[name].[ext]',
            },
          },
        ],
      },
    ],
  },
};

learn_webpack/src/index.js

1	import point from './img/point.png';

运行：

1
2
3

#!/usr/bin/env bash

npm webpack

相当于

文件会被复制到learn_webpack/dist/。
/\/([a-z0-9]+)\/[a-z0-9]+\.png$/匹配到了./img/point.png，正则表达式中的第 1 个捕获型分组所匹配到的是img。
文件的名称会被修改为img-point，扩展名保持不变。
在learn_webpack/dist/main.js中使用URL引入文件。

esModule

是否以 ESM 规格生成模块

默认值为true

示例

learn_webpack/webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};