时间戳

首页 > 解决方案 > 静态图片的 Webpack 文件加载器配置

node.js - 静态图片的 Webpack 文件加载器配置

问题描述

嗨，我有带有一些图像的子目录的/images文件夹。/static

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

谢谢你

标签： node.jsreactjswebpack

解决方案

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

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

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

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

否则，您可以使用 file-loader 使文件 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}>

推荐阅读