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

Posted 2023-02-22

【中文标题】Webpack 不会将我使用的图像复制到反应组件中

【英文标题】：Webpack does not copy the images that i use into react components

【发布时间】：2021-12-08 00:20:55

【问题描述】：

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

我做的是：

打包js文件复制到build/static/js 将css文件打包并复制到build/static/css **复制/assets/img文件夹并复制到build/static/media

**并非assets 文件夹中的所有图像都被复制。用于反应组件的图像被忽略，如下所示： <img width="34 src=$url/img/car.svg alt="car" />

上下文：

所以所有 js 和 css 文件都正确捆绑。 我的问题是 src/assets/img 中的 images(png,svg) 被复制到 build/static/media 中，仅用于 scss 文件中，而 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 34 src=CarImage  />

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

【讨论】：

你是对的。我刚试过。图像是动态的：从$assets)/img/car.svg 导入汽车；这可能有点挑战，但它是另一回事。

还有字体文件怎么样。我在 scss 中使用它们，但它们也被忽略了。

this answer 可能会帮助你