:::info 💡在 webpack 5 之前，通常使用：

在 webpack 5 之后，资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

  • asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
  • asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
  • asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
  • asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。 :::

    webpack5 之前

    file-loader

    :::tips file-loader将文件发送到输出目录 :::

    1.下载

    1. npm i file-loader -D

    2.配置

    :::success 配置之前，先说一下图片的两种引入方式。
    一种是通过img标签的src属性来设置图片
    第二种是通过scc样式添加背景图片来设置图片，这一种会有一点问题，下面会说明。 ::: ```javascript //entry 入口文件 import ‘./index.css’ //该文件用于第10行的css类名设置背景图 import img1 from ‘./assets/images/1.png’

(function createEl() { const imgSrcDom = document.createElement(‘img’); imgSrcDom.src = img1; document.body.appendChild(imgSrcDom);

const imgBgDom = document.createElement(‘img’); imgBgDom.className = ‘img’ document.body.appendChild(imgBgDom) })()

  1. ```css
  2. .img {
  3.   width: 100px;
  4.   height: 100px;
  5.   border: 1px solid green;
  6.   background-image: url(./assets/images/2.png);
  7.   background-size: 100%;
  8. }
  1. const path = require('path');
  3. module.exports = {
  4.   entry: './src/index.js',
  5.   output: {
  6.     filename: 'index.js',
  7.     path: path.resolve(__dirname, 'dist'),
  8.   },
  9.   module: {
  10.     rules: [
  11.       {
  12.         test: /\.css$/,
  13.         use: [
  14.           'style-loader',
  15.           'css-loader',
  16.           'postcss-loader'
  17.         ]
  18. +     },
  19. +     {
  20. +       test: /\.(png|jpg|gif)$/,
  21. +       use: [
  22. +         'file-loader'
  23. +       ]
  24. +     }
  25.     ]
  26.   }
  27. };

3.打包

打完包你会发现用img标签src属性引入的图片可以正常展示，用css文件中background-image的图片有问题，

  1. .img {
  2.   width: 100px;
  3.   height: 100px;
  4.   border: 1px solid green;
  5.   background-image: url(./assets/images/2.png);
  6.   background-size: 100%;
  7. }

官网给出的解释是css遇到url()会默认解析为require，而require默认导出的是esmodule，所以问题不在file-loader，而在css-loader。需要给css-loader设置esModule:false就好了。

  1. const path = require('path');
  3. module.exports = {
  4.   entry: './src/index.js',
  5.   output: {
  6.     filename: 'index.js',
  7.     path: path.resolve(__dirname, 'dist'),
  8.   },
  9.   module: {
  10.     rules: [
  11.       {
  12.         test: /\.css$/,
  13.         use: [
  14.           'style-loader',
  15. -         'css-loader',
  16. +                    {
  17. +                        loader: 'css-loader',
  18. +                        options: {
  19. +                            esModule: false
  20. +                        }
  21. +                    }
  22.           'postcss-loader'
  23.         ]
  24.       },
  25.       {
  26.         test: /\.(png|jpg|gif)$/,
  27.         use: [
  28.           'file-loader'
  29.         ]
  30.       }
  31.     ]
  32.   }
  33. };

重新打包就可以了

4.配置项