Webpack 不会将我使用的图像复制到 React 组件中

Question

嗨，我在一个单独的覆盖-webpack.ts 文件中覆盖了 create-react-app 的 webpack。

我做的是：

打包js文件，复制到build/static/js
捆绑 css 个文件并将它们复制到 build/static/css
**复制/assets/img文件夹并将它们复制到build/static/media

**并非 assets 文件夹中的所有图像都是 copied.The 用于反应组件的图像，它们将被忽略，如下所示： <img width="34 src={${url}/img/car.svg} alt="car" />

上下文：

因此所有 js 和 css 文件都已正确捆绑。
我的问题是 src/assets/img 中的 images(png,svg) 被复制到 build/static/media 中，只是 [=18= 中使用的那些] 文件，并且 NOT 来自我的反应组件，这些图像被忽略，（ 如我上面所示 )，这就是我要找的，如何将它们也包含在构建文件夹中

我的override-webpack.ts是这样的：.

var configurator = {
    paths(paths) {
      // paths
    },
 webpack(config, env) {
   //if stage, prod, dev
    bundleSass()
    addMedia()
    overrideOutput()
    return config;
  }
}

module.exports = configurator;


// overrride the publicPath of the bundles, so to have it into index.html
function overrideOutput(config) {
    config.output.filename = 'static/js/[name].[hash:8].js';
   config.output.chunkFilename = 'static/js/[name].[hash:8].chunk.js';
   config.output.publicPath = `http://www.something.com/`; // this is added into index.html
}


// copy images to build/static folder, i was hoping to copy the fonts as well but it does not..
// this functionality ONLY copies the images that are called into the css files,
// it IGNORES the images that used into react components,
// like: 
// <img width="34 src={`${url}/img/user.svg`} alt="user" />
function addMedia(config){
  const media = {
    test: /\.(woff(2)?|ttf|eot|svg|png)(\?v=\d+\.\d+\.\d+)?$/,
    use: [
     {
      loader: 'file-loader',
       options: {
        name: '[name].[ext]',
        outputPath: 'static/media', // by default it creates a media folder
       }
     }
    ]
 };

 config.module.rules.push( media ); // push the rule to the module array
}

// bundle scss files
function bundleSass(config) {
   // add rule for the sass-loader, so to bundle the scss files
}

欢迎就为什么不将 React 组件内部的图像复制到 build/static/media 提出任何建议。

Answer 1

问题是，您没有在 React 中导入使用过的图像，而只是链接到它们。尝试像这样导入和使用图像文件：

import CarImage from '../../img/car.svg';
// further down in the component
<img width="34 src={CarImage} alt="car" />

现在 webpack 应该可以识别导入并写入文件。

Webpack 不会将我使用的图像复制到 React 组件中

Webpack does not copy the images that i use into react components

javascript

node.js

reactjs

webpack

webpack-4