Question

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

$string = "abc, abcd, aec, abc, aaa, ccc, aec, abc, efg, abc, aaa, aec, cde";

$words = explode(',',$string);
foreach($words as $key) {
   ????
}

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

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

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

Answer 1

我不是网络专家，但是我通过这样做得到了它

<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子编译主要配置中的所有加载器。

在你的img路径上调用require然后将调用文件加载器。

您可能会遇到一些路径问题，但它应该有效。

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([
         {from:'./src/assets/images',to:'images'} 
     ]),
    ....
]

这是将src/assets/images复制到您的'distfolder / images＆＃39;。

Answer 4

您可以在webpack配置中使用url-loader添加在最终捆绑包中编码为base64 uri的某个限制以下的图像，并添加作为常规图像标签（相对于publicPath）的该限制以上的图像

module.rules.push({
  test: /\.(png|jp(e*)g|gif)$/,
  exclude: /node_modules/,
  use: [{ 
    loader: 'url-loader',
    options: {
      limit: 10000,
      publicPath: "/"
    }
  }]
})

Answer 5

我在遵循 Webpack 提供的入门指南时遇到了这个问题。我正在使用指南和捆绑图像中的模板代码。但是，当迁移现有的 vanilla html/js/css 项目以使用 Webpack 时，我发现为了使用我想要的模板 HTML 加载 - 模板中包含图像资源的路径 - 我不得不删除资产我的 webpack.config.js 中用于 html-loader 的加载器用法，以正确解析它在 dist

中创建的新散列路径

要使用 Webpack 文档语法，请删除以“-”为前缀的行并添加以“+”为前缀的行

module: {
  rules: [
    {
      - test: /\.(png|svg|jpg|jpeg|gif)$/i,
      - type: 'asset/resource',
      + test: /\.(html)$/,
      + use: ['html-loader'],
    }
  ]
}

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

5 个答案: