찾다

 >  Q&A  >  본문

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

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

配置

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

<code>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;

</code>

模版 index.html

1

2

3

4

5

6

7

8

9

10

11

12

13

<code><!DOCTYPE html>

<html>

<head>

    <title> <%= htmlWebpackPlugin.options.title %> </title>

</head>

<body>

 

</body>

</html>

 

 

 

</code>

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

1

2

3

4

5

6

7

8

9

10

<code>  <!DOCTYPE html>

<html>

<head>

    <title> <%= htmlWebpackPlugin.options.title %> </title>

</head>

<body>

 

</body>

</html>

</code>

天蓬老师天蓬老师2833일 전1084

모든 응답(6)나는 대답할 것이다

  • PHPz

    PHPz2017-04-11 09:56:21

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

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    <code class="javascript">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'

    }

    </code>

    index.ejs

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    <code class="html"><!DOCTYPE html>

    <html>

      <head>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

        <title><%= htmlWebpackPlugin.options.title %></title>

      </head>

      <body>

      </body>

    </html>

    </code>

    目录结构

    회신하다
    0
  • PHPz

    PHPz2017-04-11 09:56:21

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

    회신하다
    0
  • 黄舟

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

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

    회신하다
    0
  • PHP中文网

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

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

    회신하다
    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.

    회신하다
    0
  • 高洛峰

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

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

    1

    2

    3

    4

    5

    6

    <code class="javascript">    plugins: [

           new HtmlWebpackPlugin({

              title: 'xxx',

              template: './index.ejs'

           })

        ]</code>

    회신하다
    0
  • 취소회신하다