html-webpack-plugin 中使用 title选项设置模版中的值无效帮忙看看撒

// 问题已解决没发现代码有问题重新clone了项目，改了个template的路径就好了不知道发生了什么，囧

配置

var webpack = require("webpack");
var vue = require("vue-loader");

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

var publicPath = "/public/assets/";

var plugins = [
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
        new HtmlWebpackPlugin({
            title: '111',
            template: './resources/assets/template/index.html', // Load a custom template
            inject: true // Inject all scripts into the body
          }),
        new HtmlWebpackPlugin({
            title: '222',
            filename: '../../resources/views/user.html',
            template: './resources/assets/template/index.html',
            inject: true,
            hash: true,
            cache: true
            // chunks: ['vendors']
         })
    ];

var config = {
    entry: {
        user:['./resources/assets/user-main.coffee'],
        vendors: ['vue','jquery','vuex','vue-router']
    },
    output: {
        path: __dirname + publicPath,
        filename: '[name].js',
        publicPath: publicPath,
    },
    module: {
        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.coffee$/,
                exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
                loader: 'coffee'
            }
        ]
    },
    plugins: plugins
};

module.exports = config;

模版 index.html

<!DOCTYPE html>
<html>
<head>
    <title> <%= htmlWebpackPlugin.options.title %> </title>
</head>
<body>

</body>
</html>

生成 index.html 中变量没有被替换

  <!DOCTYPE html>
<html>
<head>
    <title> <%= htmlWebpackPlugin.options.title %> </title>
</head>
<body>

</body>
</html>

webpack javascript

阅读 24.4k

8 个回答

✓ 已被采纳

你的模版文件明明是html，估计需要ejs文件才可以识别的
我的配置,webpack.config.js：

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/main.js',
  output: {
    path: './dist',
    publicPath: 'dist/',
    filename: 'build.js'
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'file?name=[name].[ext]?[hash]'
      }
    ]
  },
  babel: {
    presets: ['es2015', 'stage-0'],
    plugins: ['transform-runtime']
  },
  plugins:[
    new HtmlWebpackPlugin({
        title: 'Custom template',
        template:"index.ejs",
        inject:true
    })
  ]
}

if (process.env.NODE_ENV === 'production') {
  module.exports.plugins = [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.optimize.OccurenceOrderPlugin()
  ]
} else {
  module.exports.devtool = '#source-map'
}

index.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
  </body>
</html>

目录结构

李若炎

1.5k62840

发布于
2016-03-07

应该是你的webpack.config.js的配置文件里面加了 html-loader，加了之后会正常解析html文件作为模版，就会直接把 <%= htmlWebpackPlugin.options.title %>解析成字符串。如果有html-loader ,去掉就可以了

Safaring

192

发布于
2016-04-27

出现一样的问题，去掉html-loader，就可以了，另外html文件的<%= htmlWebpackPlugin.options.title %> htmlWebpackPlugin 注意大小写，不要写错成 HtmlWebpackPlugin。

小白

发布于
2019-04-22

新手上路，请多包涵

其实原因很简单，因为这个方法不能对已经打包好的dist下面的index.html生效，只能对模板进行设置，所以这个方法没卵用。想动态改title，如react可以使用react-helmet

薛定谔的Baboon

发布于
2021-01-11

新手上路，请多包涵

我也遇到这个问题，是因为我使用了 html-loader ,我对 html-loader 配置了 exclude 属性，排除了，我的 html-webpack-plugin 使用的 模板文件后

我的构建结果可以正常输出变量的值了

解决方法

html-webpack-plugin 配置

plugins: [
  new CleanWebpackPlugin(),
  new HtmlWebpackPlugin({
    title: "hello HtmlWebpackPlugin!",
    template: "./index.html", // 这是我的模板文件
    inject: true,
  }),
];

html-loader 配置

module: {
  rules: [
    {
      test: /.html$/,
      use: {
        loader: "html-loader",
      },
      exclude: /index.html/, //排除 html-webpack-plugin 使用的模板文件，解决变量不输出问题
    },
  ];
}

hewlo_dfabe

2k13

发布于
2016-12-27

更新于
2017-06-03

here has a cool plugin can resolve this issue in simple way:
web-webpack-plugin
have a try.

使用html模版 demo

webpack配置

module.exports = {
    entry: {
        A: './a',
        B: './b',
    },
    plugins: [
        new WebPlugin({
            filename: 'index.html',
            // html模版文件路径（相对于webpack.config.js的完整路径）
            template: './template.html',
            requires: ['A', 'B'],
        }),
    ]
};

html模版
通过html模版你可以很方便清晰的描述资源应该注入的位置

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <!--加载一个在webpack里配置输出的chunk文件-->
    <script src="B"></script>
    <!--直接加载一个本地的文件的原内容，不走webpack的打包逻辑-->
    <link rel="stylesheet" href="./reset.min.css?_inline">
    <!--直接加载一个本地的文件的原内容，不走webpack的打包逻辑-->
    <script src="./google-analyze.js"></script>
</head>
<body>
<!--SCRIPT-->
<footer>web-webpack-plugin</footer>
</body>
</html>

在html模版里通过<script src="B"></script> 引入需要的entry，src="B" 中的B为chunk配置的名称
注释 代表除开通过<script src></script>引入的资源外，在 requires 里配置的剩下的依赖的资源应该被注入的地方，如果模版没有出现就放在body标签的最后

输出的html:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <!--加载一个在webpack里配置输出的chunk文件-->
    <script src="B.js"></script>
    <!--直接加载一个本地的文件的原内容，不走webpack的打包逻辑-->
    <style>body {
        background-color: rebeccapurple;
    }</style>
    <!--直接加载一个本地的文件的原内容，不走webpack的打包逻辑-->
    <script src="google-analyze.js"></script>
</head>
<body>
<script src="A.js"></script>
<footer>web-webpack-plugin</footer>

</body>
</html>

苹果小萝卜

5.1k105364

发布于
2017-02-06

在进行插件配置的时候，需要将你选择作为template的文件改为ejs。html-webpack-plugin会将ejs的模板文件解析为html并输出。

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

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

被 1 篇内容引用

webpack-自动生成html

推荐问题

html-webpack-plugin 中使用 title选项设置模版中的值无效帮忙看看撒

解决方法

使用html模版 demo

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？

前端有没有办法实现页面截图？

html-webpack-plugin 中使用 title选项设置模版中的 值 无效 帮忙看看撒

解决方法

使用html模版 demo

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？

前端有没有办法实现页面截图？

html-webpack-plugin 中使用 title选项设置模版中的值无效帮忙看看撒