如何使用HTMLWebpackPlugin通过webpack加载图像？

我正在使用HTMLWebpackPlugin，并在我的模板中有一个img标签：

<img src="./images/logo/png"> 

如果你注意到，在这里我使用了一个相对path思维的webpack将触发configuration在我的webpack.config.js文件中的文件加载器，但编译后，我得到了完全相同的src属性在我的html：

 <img src="./images/logo/png"> 

我怎样才能触发webpackdynamicreplace这些相对path，以及无论我在我的webpackconfigurationconfiguration？

Answer 1

我不是一个webpack专家，但我通过这样做是为了工作

 <img src="<%=require('./src/assets/logo.png')%>"> 

插件configuration

 new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html' }), 

根据文档： https ： //github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md

默认情况下（如果你没有以任何方式指定任何加载器）一个后备lodash加载器踢。

<%= %>表示一个lodash模板

在引擎盖下，它使用了一个webpack子编译器，它inheritance了主configuration中的所有加载器。

调用require您的imgpath将然后调用文件加载器。

你可能遇到一些path问题，但它应该工作。

Answer 2

你应该使用CopyWebpackPlugin 。

const CopyWebpackPlugin = require('copy-webpack-plugin');

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

这是复制src/assets/images到你的'distfolder / images'。