webpack 打包后，路径错误导致图片和 CSS 无法正常访问-JavaScript中文网-JavaScript教程资源分享门户

在使用 webpack 进行前端开发时，我们常常会遇到一个问题：打包后，图片和 CSS 文件的路径错误，导致无法正常访问。这个问题在刚开始使用 webpack 的时候很容易遇到，解决起来却不是那么简单。

问题分析

当我们在代码中引用图片或 CSS 文件时，通常使用相对路径，如下所示：

<img src="./images/logo.png" alt="logo">
<link rel="stylesheet" href="./css/style.css">

然而，当 webpack 打包时，会将所有文件打包成一个文件，这个文件通常在项目根目录下，并没有原来的目录结构。因此，相对路径就会出现问题，无法正确地定位到我们需要的文件。

例如，假设我们有以下的项目结构：

// javascriptcn.com 代码示例
├── dist
│   ├── bundle.js
├── src
│   ├── images
│   │   └── logo.png
│   ├── css
│   │   └── style.css
│   └── index.html
├── package.json
├── webpack.config.js

当我们在 index.html 中引用图片和 CSS 文件时，使用了相对路径：

<img src="./images/logo.png" alt="logo">
<link rel="stylesheet" href="./css/style.css">

但是，当我们使用 webpack 打包后，生成的文件如下所示：

// javascriptcn.com 代码示例
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
    <link href="main.css" rel="stylesheet">
  </head>
  <body>
    <img src="logo.png" alt="logo">
    <script src="bundle.js"></script>
  </body>
</html>

可以看到，图片和 CSS 文件的路径已经发生了变化。这时候，index.html 就无法正确地定位到这些资源了，因此，浏览器也无法加载它们。

解决方案

为了解决这个问题，我们需要使用 webpack 提供的一些配置项。下面，我们来看一下具体的解决方案。

使用 publicPath 配置选项

webpack 提供了一个 publicPath 配置选项，可以用来设置 webpack 打包后模块的公共路径。publicPath 会在打包后的文件路径前面加上，并且会影响模块内部的相对路径。

我们可以在 webpack.config.js 中进行配置：

// javascriptcn.com 代码示例
const path = require('path');

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
};

在这个配置中，我们将 publicPath 设置为 '/'，表示所有资源的地址都以根目录为起点。这个配置项会影响到打包后的文件路径，如下所示：

// javascriptcn.com 代码示例
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
    <link href="/main.css" rel="stylesheet">
  </head>
  <body>
    <img src="/logo.png" alt="logo">
    <script src="/bundle.js"></script>
  </body>
</html>

可以看到，图片和 CSS 文件的路径已经发生了变化，前面加上了 "/"，这时候，浏览器就可以正确地加载这些资源了。

使用 file-loader 和 url-loader

除了使用 publicPath 配置选项外，我们还可以使用 file-loader 和 url-loader 进行配置，这两个 loader 可以帮助我们自动处理图片和 CSS 文件的路径，使其能够正确地被打包后的文件引用。

file-loader

file-loader 可以将静态资源输出到指定的目录，并返回资源对应的 URL。我们可以在 webpack.config.js 中进行如下的配置：

// javascriptcn.com 代码示例
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images',
              name: '[name].[ext]',
            },
          },
        ],
      },
    ],
  },
};

这个配置表示，在遇到以 .png、.jpg、.jpeg 或 .gif 结尾的文件时，使用 file-loader 进行处理。输出目录为 images，文件名为原来的文件名和扩展名。

这样，我们在代码中引用图片时，使用的路径为相对路径，如下所示：

<img src="./images/logo.png" alt="logo">

file-loader 会自动将图片输出到指定的目录并添加对应的哈希值，如下所示：

├── dist
│   ├── images
│   │   └── logo.98gfyfhd.png

url-loader

url-loader 可以将小于指定大小的图片转换为 Base64 编码的 DataURL，而不是将其输出到指定的目录。我们可以在 webpack.config.js 中进行如下的配置：

// javascriptcn.com 代码示例
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              outputPath: 'images',
              name: '[name].[ext]',
            },
          },
        ],
      },
    ],
  },
};

这个配置表示，在遇到小于 8KB 的以 .png、.jpg、.jpeg 或 .gif 结尾的文件时，使用 url-loader 进行处理。如果文件大小大于 8KB，则使用 file-loader 进行处理。输出目录为 images，文件名为原来的文件名和扩展名。

这样，我们在代码中引用图片时，使用的路径为相对路径，如下所示：

<img src="./images/logo.png" alt="logo">

url-loader 会自动将小于 8KB 的图片转换为 DataURL，并且将其添加到打包后的文件中，如下所示：

// javascriptcn.com 代码示例
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
    <style>
      .logo {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAA7EAAAOxAGVKw4bAAADwklEQVR4nO3bsU3TQBiA4S9SUNESDEW8iaUISZZRhfcQjFwUN0RUryI0/qzvVGPSGxERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERGBKd3q3uw+64vcuhn+fPpjvwvvzRcUMBMAABJx1aiggExr5169NQY8h3LqST7wIwNrNMXPlghzO56vJfNLc657xXOLOyh0m8EeGEjscHm5w5yAH0+V7dz8fqv73uV7neTBX/FB/n97lDG8PvzeEnOh2wAAgPhryyWnG8orH+PSEREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREQxcUc4O4sG6fj/6+O/svu23lnS6XSozaD3Wq793v3NDFgCwAAQNMJovjW8Yv42OLj0ERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERHxHA/vblnkrJkuVwAAAABJRU5ErkJggg==);
        width: 200px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="logo"></div>
    <script src="bundle.js"></script>
  </body>
</html>

可以看到，图片文件已经被转换为 DataURL，并且添加到了打包后的文件中，这样，浏览器就可以直接从下面的打包后的文件中加载图片了。

总结

以上就是关于使用 webpack 进行前端开发时，解决图片和 CSS 路径错误的问题的相关内容。可以看到，我们使用 publicPath 配置选项和 file-loader、url-loader 进行配置，可以很好地解决这个问题。当然，在实际开发中，我们可以根据具体的项目需要进行灵活的配置，以达到更好的效果。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65356a897d4982a6ebc5c259