Fatal编程技术网
  • javascript/
  • Javascript Img src未使用HtmlWebpackPlugin templateContent使用publicPath更新

Javascript Img src未使用HtmlWebpackPlugin templateContent使用publicPath更新

javascript html

Javascript Img src未使用HtmlWebpackPlugin templateContent使用publicPath更新,javascript,html,handlebars.js,webpack-2,html-webpack-plugin,Javascript,Html,Handlebars.js,Webpack 2,Html Webpack Plugin,我正在尝试使用HtmlWebpackPlugin和把手来生成一个更为简单的静态html页面。当一切都像一个魔咒一样工作时，使用模板内容（函数）而不是模板（路径）作为HtmlWebpackPlugin的选项，img src在构建时不会以html更新 这里是index.html（位于：“src/templates/index.html”）： 我的package.json看起来很粗糙： { ... "devDependencies": { ... "file-loader":

我正在尝试使用HtmlWebpackPlugin和把手来生成一个更为简单的静态html页面。当一切都像一个魔咒一样工作时，使用模板内容（函数）而不是模板（路径）作为HtmlWebpackPlugin的选项，img src在构建时不会以html更新

这里是index.html（位于：“src/templates/index.html”）：

我的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中的模板选项。描述的问题仍然相同。）

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

我注意到您在资产文件夹前面加了一个波浪号（~）：
。平铺是Webpack使用的特殊约定，还是您打算在主文件夹中查找的
~/assets
，还是在当前文件夹中查找的
/assets
？我这样说是因为模板中的所有其他URL都被正确转换。是的，这是特定于网页包的，而不是指主文件夹。正如我所说，“../../assets/images/image.svg”也是一个正确的路径，但没有正确更新。有什么建议吗？我想原因是我通过“var source=fs.readFileSync（templatePath，'utf8'）；”加载模板，这种方式绕过了webpack，导致图像路径无法正确替换。但是：图像已正确导出到dist文件夹。我注意到您在资产文件夹前面加了一个波浪号（~）：
。平铺是Webpack使用的特殊约定，还是您打算在主文件夹中查找的
~/assets
，还是在当前文件夹中查找的
/assets
？我这样说是因为模板中的所有其他URL都被正确转换。是的，这是特定于网页包的，而不是指主文件夹。正如我所说，“../../assets/images/image.svg”也是一个正确的路径，但没有正确更新。有什么建议吗？我想原因是我通过“var source=fs.readFileSync（templatePath，'utf8'）；”加载模板，这种方式绕过了webpack，导致图像路径无法正确替换。但是：图像已正确导出到dist文件夹。 
<!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>

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

  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);
        },
      })
    ]
  };

{
  ...
  "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",
  },
  ...
}