# 文件处理

webpack 只能处理 JavaScript 文件和 JSON 文件，如果遇到样式、图像等文件时无法处理的。我们需要一个工具（loader）将这些文件转化为 JS 文件或者语法，供 webpack 识别。

# CSS 处理

css-loader (opens new window)将 CSS 转化为 JS，并处理@import、url()的 CSS 依赖。
style-loader (opens new window)将 CSS 模块（已经转化成 JS 的字符串），通过<style>插入到<head>中。
use是从右到左执行的，不可写错顺序。

# 安装
npm install --save-dev style-loader css-loader

1
2

// webpack.config.js
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

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

链接

# 文件处理

file-loader (opens new window) 将引入文件输出至目录，在代码中把引入文件地址解析成 url。
url-loader (opens new window) 将文件转化为 base64URL，插入至 JS 中。

JSON 文件解析功能是内置在 webpack 中的，除此之外，可能还需要解析 CSV、TSV 和 XML 等文件，可以尝试csv-loader (opens new window)、xml-loader (opens new window)。

# 安装
npm install --save-dev file-loader

1
2

module.exports = {
  // ...
  module: {
    rules: [
      // 处理图像文件
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"],
      },
      // 处理字体文件
      {
        test: /.(woff|woff2|eot|ttf|otf)$/,
        use: ["file-loader"],
      },
    ],
  },
};

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

例如：

import avatar from "./avatar.png";
import data from "./data.json";

console.log(avatar); // .../5439466351d432b73fdb518c6ae9654a.png
console.log(data); // { list: [...], ... }

1
2
3
4
5

链接

← 起步管理输出 →