webpack HtmlWebpackPlugin配置问题

问题描述

问 题

一直都没遇到问题，今天写了个测试，居然没加载成功。

异常配置代码

new HtmlWebpackPlugin({
            filename: 'views/index.html',
            template: 'views/index.html',
            inject: true
        })

正常配置代码

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    })

entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
    filename: '[name].js'
  },

运行结果

正常的时候好像应该是这样的

Listening at http://localhost:8080

webpack: wait until bundle finished: /index.html
webpack built 9b6438af052f24a2c3a0 in 4473ms
Hash: 9b6438af052f24a2c3a0
Version: webpack 1.14.0
Time: 4473ms
     Asset       Size  Chunks             Chunk Names
    app.js     953 kB       0  [emitted]  app
index.html  246 bytes          [emitted]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  1.47 MB       0
webpack: bundle is now VALID.

调整了路径配置后（publicPath已经相应的添加了路径views）

webpack built 354b19f27f61fbb7d197 in 4861ms
Hash: 354b19f27f61fbb7d197
Version: webpack 1.14.0
Time: 4861ms
           Asset       Size  Chunks             Chunk Names
          app.js     953 kB       0  [emitted]  app
views/index.html  311 bytes          [emitted]
Child html-webpack-plugin for "views\index.html":
               Asset     Size  Chunks       Chunk Names
    views/index.html  1.47 MB       0
webpack: bundle is now VALID.

好像少了以下代码

webpack: wait until bundle finished: /index.html

js没正常加载到页面上
正常

<div>
       <h1>test</h1>
    </div>
    // 这里正常加载
<script type="text/javascript" src="/app.js"></script>

异常

<div>
       <h1>test</h1>
    </div>
    // 没有加载

是不是哪里配置漏了，暂时想不到，也找不到

重新写了两个初始化的例子，build的结果如下：

Hash: ca6121b736dd84d8f6c9
Version: webpack 1.14.0
Time: 19063ms
                                                  Asset       Size  Chunks             Chunk Names
             static/js/manifest.6b8f4ff2224c30a1680d.js  837 bytes       0  [emitted]  manifest
                  static/js/app.4689b4ea460c30340b45.js    11.9 kB    1, 0  [emitted]  app
               static/js/vendor.a1a911e0bd6f8c1d5c30.js    74.3 kB    2, 0  [emitted]  vendor
    static/css/app.0a69bf893990584369fe1c1af522134d.css  431 bytes    1, 0  [emitted]  app
         static/js/manifest.6b8f4ff2224c30a1680d.js.map    8.87 kB       0  [emitted]  manifest
              static/js/app.4689b4ea460c30340b45.js.map    35.7 kB    1, 0  [emitted]  app
static/css/app.0a69bf893990584369fe1c1af522134d.css.map  946 bytes    1, 0  [emitted]  app
           static/js/vendor.a1a911e0bd6f8c1d5c30.js.map     604 kB    2, 0  [emitted]  vendor
                                             index.html  530 bytes          [emitted]

Hash: d9cf003a358d1c6e6a5b
Version: webpack 1.14.0
Time: 4870ms
                                                  Asset       Size  Chunks             Chunk Names
             static/js/manifest.08aea06a0c8c5457e359.js  832 bytes       0  [emitted]  manifest
                  static/js/app.20b2a3d9b82545fc7076.js    11.9 kB    1, 0  [emitted]  app
               static/js/vendor.a1a911e0bd6f8c1d5c30.js    74.3 kB    2, 0  [emitted]  vendor
    static/css/app.b6f6a92bed9f6de0c31cb64060bd1417.css  431 bytes    1, 0  [emitted]  app
         static/js/manifest.08aea06a0c8c5457e359.js.map    8.86 kB       0  [emitted]  manifest
              static/js/app.20b2a3d9b82545fc7076.js.map    35.7 kB    1, 0  [emitted]  app
static/css/app.b6f6a92bed9f6de0c31cb64060bd1417.css.map  946 bytes    1, 0  [emitted]  app
           static/js/vendor.a1a911e0bd6f8c1d5c30.js.map     604 kB    2, 0  [emitted]  vendor
                                             index.html  441 bytes          [emitted]

解决方案

应该是配置了路由的原因吧，检查下路由配置

这篇关于webpack HtmlWebpackPlugin配置问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！