尽管有文件加载器 (url-loader)，图像仍未使用 Webpack 在 React 应用程序中加载

Question

我有一个使用 Webpack 和 Babel 的 React 应用程序。我试图以任何可能的方式加载图像（svg、png...），但我一直收到错误 "Unexpected character '�' (1:0) > 1 | �PNG"。我安装了 url-loader (npm install url-loader --save-dev)，它应该有助于在使用 Webpack 时加载图像。什么都没有改变。

这是我的 webpack.config.js:

const {NODE_ENV} = process.env;

module.exports = {
  mode: NODE_ENV === 'production' ? NODE_ENV : 'development',
  entry: ['./client/index.js'],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 25000
            }
          }
        ]
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },

  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js',
  },

};

这是我尝试加载图片的方式：

import hiker from './hiker.png';
<img src={hiker} />

非常感谢任何帮助，谢谢。

Answer 1

这里有几个问题。首先，您正在使用指向 index.js 的 babel-node。如果你想让它指向你的 webpack 配置，那么你需要从 package.json 的开发中删除 index.js scripts:

"dev": "nodemon --exec babel-node",

并将 webpack.config.js 重命名为 babel.config.js。

不幸的是，要使您的项目正常运行还需要做更多的工作运行。此设置似乎使用了一些 server-side-rendering 配置。不可否认，我从未使用过 koa，所以我在这里帮不上什么忙。

它也显得有点过时，有人updated it and included a walkthrough。

就是说，如果您只是在学习，我建议您转向对新开发人员友好的样板。

我建议从 create-react-app 开始，这会掩盖很多 webpack 配置。

或者，您可以下载我的 react-starter-kit，它有一个公开的 webpack 配置，您可以随意使用（如果需要）并利用 webpack-dev-server 进行开发，并利用 webpack非常简单的 express 生产配置。

由你决定。

祝你好运！

尽管有文件加载器 (url-loader)，图像仍未使用 Webpack 在 React 应用程序中加载

Images not loading in React app with Webpack despite having file loaders (url-loader)

svg

reactjs

webpack

babeljs

webpack-file-loader