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

Question

// 问题已解决 没发现代码有问题 重新clone了项目， 改了个template的路径 就好了 不知道发生了什么， 囧 配置 {代码...} 模版 index.html {代码...} 生成 index.html 中 变量没有被替换 {代码...}

PHPz · Answer

你的模版文件明明是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



  
    
    <%= htmlWebpackPlugin.options.title %>

目录结构

PHPz · Answer

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

黄舟 · Answer

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

PHP中文网 · Answer

如果不去掉html-loader有没有什么办法能解决不解析的问题？

PHP中文网 · Answer

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

高洛峰 · Answer

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

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