用于静态图像的Webpack文件加载器配置

Question

Hy，我有/images文件夹与/static子目录和一些图像。

我怎么能配置webpack从qazxsw poi路径qazxsw poi上公开可用的图像，并保留名字？

谢谢

Answer 1

您可以使用images/static将所有文件复制到构建的必需文件夹中。

dist/images/image-name.png

以后你必须像这样导入它们。

CopyWebpackPlugin

否则，您可以使用文件加载器使文件URL可用于编程用法

plugins: [
    new CopyWebpackPlugin([
    { from: 'src/images/static', to: './dist/images' }
  ])
  ]

并且您的图像将被发送到：

<img src="path/to/dist/image.png">

稍后您可以导入如下图像：

 {
   test: /\.(jpe?g|png|gif|svg)$/i, 
   loader: "file-loader?name=/images/[name].[ext]"
 }