Question

我有一个使用Webpack和Babel的React应用程序。我正在尝试尽可能加载图像（svg，png ...），但是我不断收到错误消息``意外字符'（'（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

这里有几个问题。首先，您使用的是指向babel-node的{{1}}。如果您希望它指向您的webpack配置，则需要从index.js的开发index.js中删除package.json：

scripts

并将"dev": "nodemon --exec babel-node",重命名为webpack.config.js。

不幸的是，要使您的项目正常运行还需要大量工作。看来此设置使用了一些babel.config.js配置。诚然，我从未使用过server-side-rendering，所以在这里我帮不上什么忙。

似乎还有些过时，有人updated it and included a walkthrough。

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

我建议从create-react-app开始，它会掩盖许多Webpack配置。

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

由您决定。

祝你好运！

尽管具有文件加载器（url-loader），但图像仍无法通过Webpack加载到React app中

1 个答案: