Webpack/Webpack-dev-server中的图片不加载

Question

我的所有图片似乎都是404，我认为路径是正确的，因为我只是将它们放在根目录中

我正在使用文件加载器并尝试加载SVG文件

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const webpack = require('webpack');

module.exports = {
  entry: ["babel-polyfill", "./src/index.js"],
  output: {
    // filename and path are required
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        // JSX and JS are all .js
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        }
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}  
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(["dist"]),
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ]
};

这是一个我设置的示例： https://github.com/chobo2/webpack-serve-example

- chobo2

Answer 1

您需要导入：

import image from './Freesample.svg'

然后像这样使用：

<img src={image}/>

但你还需要一个适当的加载器，另一个规则：

module.exports = {
  entry: ["babel-polyfill", "./src/index.js"],
  output: {
    // filename and path are required
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        // JSX and JS are all .js
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        }
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}  
          }
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        loader: 'file-loader'
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(["dist"]),
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ]
};

- PlayMa256

---

为什么我需要另一个SVG加载器？它已经包含在我原来的那个加载器中了吗？我仍然不明白为什么我要做一个导入，而以前我不必这样做。有什么改变了吗？ - chobo2

“为什么我需要另一个 SVG 加载器？” - 很遗憾，因为你需要它。Webpack 的架构选择，我们无能为力。 “它已经包含在我现有的加载器中了吗？” - 是的。你仍然需要将它们作为对象导入，这样 webpack 才能知道依赖关系。很遗憾，这就是事实，我们无能为力。 - PlayMa256

好的，对我来说有点惊讶，因为我正在查看一个使用webpack 3.8的项目，而我不需要做这个导入的事情。一定是在4.0中进行了更改。 - chobo2

虽然我复制了你的 .png 加载器，但我目前遇到了“模块解析失败：意外字符 '�'（1:0）”的错误提示。 你可能需要一个适当的加载器来处理这种文件类型。 - chobo2

不，它没有从3>4改变。说实话，这并没有提供太多信息。我一点都不清楚。 - PlayMa256

嗯，那我不知道我在版本3中是如何以另一种方式完成它的。这是我得到的唯一错误，很奇怪它只有时而发生。并非总是。 - chobo2

Answer 2

你需要使用import。

import image from './Freesample.svg'

使用方法如下：

<img src={image}/>

- Mohamed

---

哦，哇，我没想到我需要像这样导入自己的图像。之前我只是按照我的示例那样做。已经改变了吗？ - chobo2