webpack url 加载器不加载 jpg 图像答案

【问题标题】：webpack url loader doesn't load jpg imagewebpack url 加载器不加载 jpg 图像
【发布时间】：2018-02-18 13:54:47
【问题描述】：

我在使用 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：找不到模块'../../../i/map.jpg'。尽管如此，应用程序在构建后仍在工作，并显示“损坏”的图像。顺便说一句，来自与 jpg 图像相同文件夹的 png 图像工作正常，在构建过程中没有错误。你能帮助我吗？我做错了什么？

【问题讨论】：

标签： webpack urlloader

【解决方案1】：

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

【讨论】：