如何让 webpack 将我的 assets/image/ 捆绑到组件中，尽管我从 url 调用它们

Question

Webpack 正在复制静态 png,jpg,svg 文件，这些文件被导入到每个组件文件中。
承载图像的文件，它是固定的，路径是静态的。

组件文件是这样的：mycomponent.ts

---

import img from 'assets/img/aa.png

.... <img src={img} alt="" />

下面是一个更复杂的案例。

1. 从 url 导入图像：import imgurl from ${url}
2. 将其用于<img src={imgurl} />
3. 和 webpack，仍然将图像移动到 static 文件夹中！！ （这是我的目标）

我需要 webpack 做什么：。

---

1. 将assets/img中的图片捆绑到static/img中，就好像图片一样 已从 assets/img 导入，而不是 url。
2. 到目前为止，webpack 会忽略从 url 导入的图像，可能是因为在构建过程中找不到它们李>
3. 但是当我用publicPath 伪造js & css 输出时：config.output.publicPath = http://www...;,
   图像也可以这样做吗？

捆绑图片的sn-p，到目前为止：

---

// so, this changes copy the imported, into react components, images, into 
// static/media
// but it copies ONLY the images that are imported from `assets/img`
// it ignores if i import an image from a url e.g. import img from ${url}

function addMedia(config, outputPath){
  const media = {
   test: /\.(woff(2)?|ttf|eot|svg|png)(\?v=\d+\.\d+\.\d+)?$/,
    use: [
    { 
      loader: 'file-loader',
      options: {
      name: '[name].[hash:8].[ext]',
      outputPath: 'static/media',
    }
  }
  ]
};
 config.module.rules.push( media );
}

所以我想知道是否有办法从assets/img 捆绑/复制图像--> static/media, althougt 到反应文件 我从一个 url 导入它们？

Answer 1

您可以使用copy-webpack-plugin 将图像从assets/img 复制到static/media，如下所示：

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: "assets/img", to: "static/media" }
      ],
      options: {
        concurrency: 100,
      },
    }),
  ],
};

copy-webpack-plugin的文档：https://webpack.js.org/plugins/copy-webpack-plugin/