您好,匿名用户

webpack HtmlWebpackPlugin配置问题

0 投票

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

异常配置代码

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]
用户头像 提问 2017年 6月11日 @ Hera 下士 (774 威望)
分享到:

1个回答

0 投票

我有两个思路:

  1. 不要开webpack-dev-server,直接build看看,主要是看有没有报错

  2. 给HtmlWebpackPlugin指定参数chunks试试

用户头像 回复 2017年 6月11日 @ Teemo 中士 (1,148 威望)
提一个问题:

相关问题

0 投票
1 回复 341 阅读
0 投票
1 回复 278 阅读
用户头像 提问 2017年 5月6日 @ Zac 下士 (882 威望)
0 投票
1 回复 279 阅读
用户头像 提问 2017年 4月12日 @ Varus 中士 (1,116 威望)

欢迎来到随意问技术百科, 这是一个面向专业开发者的IT问答网站,提供途径助开发者查找IT技术方案,解决程序bug和网站运维难题等。
温馨提示:本网站禁止用户发布与IT技术无关的、粗浅的、毫无意义的或者违法国家法规的等不合理内容,谢谢支持。

欢迎访问随意问技术百科,为了给您提供更好的服务,请及时反馈您的意见。
...