Question

我在使用webpack和url-loader导入jpg图像时遇到了一些问题。这是我的webpack配置：

const common = {
  entry: path.join(PATHS.src, 'index.tsx'),
  output: {
    path: PATHS.build,
    filename: 'bundle.js',
  },

  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        exclude: /node_modules/
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react']
          }
        }
      },
      {
        test: /\.(png|jpg|gif|woff|woff2|ttf|mp3)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1000000
            }
          }
        ]
      }
    ],
  }
};

我尝试导入这样的jpg图像：import * as map from '../../../i/map.jpg'; 我从webpack得到了一个错误：TS2307：找不到模块＆＃39; ../../../ i / map.jpg＆＃39;。尽管如此，应用程序仍然在构建之后工作，并且＃34;已损坏＆＃34;图像显示。顺便说一句，来自jpg图像的同一文件夹中的png图像工作正常，在构建期间没有错误。你能帮助我吗？我做错了什么？

Answer 1

我没有设法解决导入jpg图像的问题，但我找到了一个用require替换import的解决方案。我仍然不知道我的配置或webpack本身有什么问题。

webpack url loader并不加载jpg图像

1 个答案: