Question

我正在尝试将标题传递给html-webpack-plugin但它根本不会创建标题标记：（

有人可以告诉我问题出在哪里

webpack.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');

module.exports = {
    entry: ['./src/app/main.ts'],
    output: {
        filename: 'build.js',
        path: 'dist'
    },
    resolve: {
        root: __dirname,
        extensions: ['', '.ts', '.js', '.json']
    },
    resolveLoader: {
        modulesDirectories: ["node_modules"]
    },
    devtool: "source-map",
    plugins: [
        new HtmlWebpackPlugin({
            title : 'Hello',
            template: './src/index.html',
            inject: 'body',
            hash: true,
        })
    ],
    module: {
        loaders: loaders
    }
};

这是 index.html

<!doctype html>
<html lang="en">
<head>
    <noscript>
        <meta http-equiv="refresh" content="0; url=https://en.wikipedia.org/wiki/JavaScript">
    </noscript>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <ui-view></ui-view>
</body>
</html>

当我启动webpack服务器标题时没有注入？

Answer 1

在html文件中尝试此<title><%= htmlWebpackPlugin.options.title %></title>。作为参考，您可以在我的回购index.html中查看webpack-setup文件。

Answer 2

此问题已在此处报告Title not working. #176

如果您想添加动态<title>标记，则应使用ejs，jade等模板语言，...

Answer 3

只需重命名index.html模板文件即可使用扩展名index.ejs。

我尝试使用.html扩展名使其正常工作，但它总是吐出普通占位符 <%= title %>。 您可以尝试先使用 .html 扩展名使其工作！

将title参数添加到templateParameters对象中，如下所示：

 plugins: [
        new HtmlWebpackPlugin({               
            template: './src/index.ejs',
            templateParameters: {
                'title': 'YourTitleGoesHere'
            }, 
           ...
           ..
        })
    ],

在您的index.ejs（以前为index.html）中，您可以这样指定参数：

<head>
 <title><%= title %></title>
...
..
.
<head>

就这样

（经过测试 html-webpack-plugin v3.2 + webpack v4.x）

Answer 4

在Webpack中插入此配置

{
    test: /\.(index.html)$/,
    use: [
      {loader: "file-loader"},
      { loader: "extract-loader" },
      {
      loader: 'html-loader',
      options: {
        attrs: [':data-src']
      }
    }]
  }

确保此配置：

new HtmlWebpackPlugin({
  title: "My Page TItle",
  template: './index.html'
}),

Answer 5

您是否尝试过将标题标签插入模板html文件./src/index.html中？

<!doctype html>
<html lang="en">
<head>
    <noscript>
        <meta http-equiv="refresh" content="0; url=https://en.wikipedia.org/wiki/JavaScript">
    </noscript>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <title>Hello</title>
</head>
<body>
    <ui-view></ui-view>
</body>
</html>

Webpack html-webpack-plugin标题不起作用

5 个答案: