如何使webpack将我的资产/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...，
   类似地，可以对图像执行此操作吗

捆绑图像片段，到目前为止：

---

// 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，或者将它们导入到反应文件中，我从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/