recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - 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>
天蓬老师天蓬老师2813 Il y a quelques jours1079

répondre à tous(6)je répondrai

  • PHPz

    PHPz2017-04-11 09:56:21

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

    目录结构

    répondre
    0
  • PHPz

    PHPz2017-04-11 09:56:21

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

    répondre
    0
  • 黄舟

    黄舟2017-04-11 09:56:21

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

    répondre
    0
  • PHP中文网

    PHP中文网2017-04-11 09:56:21

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

    répondre
    0
  • PHP中文网

    PHP中文网2017-04-11 09:56:21

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

    répondre
    0
  • 高洛峰

    高洛峰2017-04-11 09:56:21

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

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

    répondre
    0
  • Annulerrépondre