Question

我正在尝试使用 HtmlWebpackPlugin 和 Handlebars 生成更少的静态html页面。凡一切都像魅力一样，使用 templateContent （函数）代替模板（路径）作为HtmlWebpackPlugin的选项，img src不会更新在构建时的HTML中。

以下是 index.html （位于：＆＃39; src / templates / index.html＆＃39;）：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h1>{{ hello_world }}</h1>
  <img src="~assets/images/image.svg">
</body>
</html>

（我也试过＆＃34; ../../ assets / images / image.svg＆＃34;结果相同）

以下是输出index.html （位于：＆＃39; dist / index.html＆＃39;）：

<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="http://localhost/favicon.png"><link href="http://localhost/main.e0aba7a5294a4bfca93a1b95f4dc194a.css" rel="stylesheet"></head>
<body>
  <h1>Hello World</h1>
  <img src="~assets/images/image.svg">
<script type="text/javascript" src="http://localhost/main.js"></script></body>
</html>

我期待 输出index.html 让img src路径更新如下：

<img src="http://localhost/img/image.svg">

这是我的（简化的） webpack.config.js ：

  const path = require('path');
  const fs = require('fs');
  const Handlebars = require('handlebars');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  ...

  module.exports = {
    entry: ['./assets/styles/main.scss', './src/scripts/main.js'],
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].js',
      publicPath: 'http://localhost/',
    },
    resolve: {
      alias: {
        'assets': path.resolve(__dirname, 'assets'),
      },
    },
    module: {
      rules: [
        ...
        {
          test: /\.html$/,
          use: ['html-loader'],
        },
        {
          test: /\.(jpg|png|svg)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name].[ext]',
                outputPath: 'img/',
              }
            }
          ]
        },
        ...
      ]
    },
    plugins: [
      ...
      new HtmlWebpackPlugin({
        filename: 'index.html',
        favicon: 'assets/images/favicon.png',
        templateContent: function(templateParams) {
          const templatePath = path.resolve(__dirname, 'src/templates/index.html');
          var source = fs.readFileSync(templatePath, 'utf8');
          const context = require('./assets/data.json');
          return Handlebars.compile(source)(context);
        },
      })
    ]
  };

我的 package.json 看起来像是这样：

{
  ...
  "devDependencies": {
    ...
    "file-loader": "0.11.2",
    "handlebars": "4.0.10",
    "html-loader": "0.5.1",
    "html-webpack-plugin": "2.30.1",
    "url-loader": "0.5.9",
    "webpack": "3.5.5",
  },
  ...
}

现在，我在templateContent中手动替换img src，这种感觉很讨厌。

（注意：我遇到的另一个问题是使用webpack-dev-server进行热重新加载无法使用此配置。为了解决这个问题，我实际上也在HtmlWebpackPlugin中使用模板选项。所描述的问题仍然存在。）

希望任何人都有一些想法让它正常工作。谢谢！

Img src没有使用HtmlWebpackPlugin templateContent使用publicPath更新

0 个答案: