Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Coodool opened this issue Nov 25, 2017 · 1 comment
Open

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

Coodool opened this issue Nov 25, 2017 · 1 comment

Comments

@Coodool
Copy link

Coodool commented Nov 25, 2017

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
Copy link
Owner

Thanks for the issue filing with great detail and for the thumbs up that was left here. This issue sounds like it has merit, but it's beyond my current knowledge to deal with. If you'd like to submit a concrete code solution, I'd be happy to learn along, but I'm probably not going to tackle this otherwise.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jaketrent @Coodool