Description

I used DllPlugin to split vendors, and add-asset-html-webpack-plugin is introduced to integrate the vendors into the html-webpack-plugin's output.

  plugins: [
    new AddAssetHtmlPlugin({
      filepath: path.resolve(__dirname, './dist/vendor/vendor.*.dll.js'),
      includeSourcemap: false
    }),
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dist/vendor/manifest.json')
    }),
    new HtmlWebpackPlugin({
      inject: false,
      template: require('html-webpack-template')
    }),
  ]

When I introduced html-webpack-template in my webpack configuration, an issue occurs: The HTML file generated by html-wepack-template doesn't contain the vendor bundle, though listed in the output of webpack.

Webpack's output:

                               Asset       Size  Chunks                    Chunk Names
b00fcf2063016f7ec41b05ca5950f07d.png      34 kB          [emitted]
         app.6c2d3068ce2228ee93ec.js     811 kB       0  [emitted]  [big]  app
                         favicon.png    1.13 kB          [emitted]
  vendor.07d80adac38099099c8d.dll.js    1.41 MB          [emitted]  [big]
                          index.html  779 bytes          [emitted]

HTML files:

<!DOCTYPE html>
<html lang="en" >
  <head>
     .....
  </head>
  <body> 
    <div id="root"></div>   
    <script src="/app.6c2d3068ce2228ee93ec.js" type="text/javascript"></script>
  </body>
</html>

Solutions I've tried

When I config the HtmlWebpackPlugin with inject: true, the webpage works, but there are two app.js included in the HTML files, one by HtmlWebpackPlugin and the other by html-webpack-template. It's not the best practice.
I try to import the vendor.js by using scripts parameters of html-webpack-template, but it seems that globbing is not supported, which makes me confusing in dealing with a vendor bundle with chunkhash.

jaketrent / html-webpack-template

Fail to work with add-asset-html-webpack-plugin #66

Description

Solutions I've tried