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

Question

我正在使用HTMLWebpackPlugin,在我的模板中我有一个img标签:

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

如果你注意到,这里我使用的是一个相对路径,认为webpack将触发在我的webpack.config.js文件中配置的文件加载器,但是在编译之后我在html中得到了完全相同的src属性:

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

我怎样才能触发webpack动态替换这些相对路径,以及我在webpack配置中配置的内容？

Answer 1

我不是webpack专家,但是通过这样做我得到了它

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

插件配置

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

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

默认情况下(如果你没有以任何方式指定任何加载器),后备lodash加载器就会启动.

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

在引擎盖下,它使用webpack子编译,它继承了主配置中的所有加载器.

调用requireimg路径将调用文件加载器.

您可能遇到一些路径问题,但它应该工作.

Answer 2

将html-loader与HTML webpack插件配合使用对我来说很有效。

module: {
    rules: [
      {
         test: /\.(html)$/,
         use: ['html-loader']
      }
    ]
},
plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]

Answer 3

您应该使用CopyWebpackPlugin.

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

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

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