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

Question

嗨， 我有/images文件夹，其中有/static子目录，其中包含一些图片。

我如何配置webpack以便从images/static上的dist/images/image-name.png公开可用的图像，并保留名称？

谢谢

Answer 1

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

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

稍后，您必须像这样导入它们。

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

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

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

，您的图像将被发送到：

dist/images/

以后，您可以像这样导入图像：

import url from './file.png'

<img src={url}>