css-loader 和 style-loader

file-loader

url-loader将静态资源文件（图片）打包成base64地址

css-loader：处理 css 文件

处理 css 文件，会对文件中的 @import 和 url() 进行解析，就像 js 解析 import/require() 一样。

TIPS: 需要webpack@5.0及以上版本

更多：NPM（https://www.npmjs.com/package/css-loader）

style-loader：将 CSS 插入到 DOM 中

把 js 中 import './style.css' 等导入的样式文件代码，打包到 js 文件中。

运行 js 文件时，将样式自动插入到HTML的<style></style>标签中。

推荐和css-loader一起使用。

更多：NPM（https://www.npmjs.com/package/style-loader）

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

file-loader 和 url-loader

file-loader：返回图片url

是将文件上的import/require()解析为url（图片的），并将该文件发送到输出目录。

比如：

import img from './file.png';

这将导出file.png文件(如果指定了选项，则使用指定的命名约定)到输出目录中，并返回文件的公共URI。

更多：NPM（https://www.npmjs.com/package/file-loader）

url-loader：

可以通过 limit 参数对图片分情况处理：

当limit为“数字/数字字符串”、且图片体积小于 limit设置的大小时(单位为byte)，图片会被处理成 base64URL；

图片体积大于等于 limit 时会自动调用 file-loader（默认的）对图片进行处理，同时所有的查询参数都会传递给file-loader。

如果不想用file-loader可以设置fallback参数。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // '8192'
              fallback: require.resolve('responsive-loader'),
            },
          },
        ],
      },
    ],
  },
};