How to configure Webpack for multiple html files with common js and html specific js?

Question

I have setup an angular 2 version rc5 with webpack project. I am trying to add some extras like a lib.ts (for custom libraries not angular dependant) and redirect.html page which will be used as a callback page by third party for authentication (say Dropbox). so my webpack.common.js now looks like

 entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts',
    'lib': './src/lib.ts'
 },
 plugins: [
     new webpack.optimize.CommonsChunkPlugin({
         name: ['app', 'lib', 'vendor', 'polyfills']
     }),
     new HtmlWebpackPlugin({
         filename:'index.html'
         template: 'src/index.html'
     }),
     new HtmlWebpackPlugin({
         filename:'dropbox.html'
         template: 'src/redirect.html',
         excludeChunks:['app']
     })
 ]

This redirect page is just a normal page (not an angular page) which captures access_token using lib.ts and lib.ts is also used by angular as a service which pretty much wraps libs.ts.

Now i want to add a script tag or file only for redirect.html and not for angular or index.html how do i do that? Is there an example which deals with two or more separate html files with some common js includes mixed with some unique html specific js files?

RunningDeveloper · Accepted Answer · 2016-10-19 19:05:13Z

I used the CopyWebpackPlugin to copy a separate static html and js file which is used for the callback https://www.npmjs.com/package/copy-webpack-plugin

So your webpack file would be something like this

plugins: [
 new webpack.optimize.CommonsChunkPlugin({
     name: ['app', 'lib', 'vendor', 'polyfills']
 }),
 new HtmlWebpackPlugin({
     filename:'index.html'
     template: 'src/index.html'
 }),
 new CopyWebpackPlugin([
    { context: "src/dropbox", from: "**/*" }
 ])
]

Where in src/dropbox you put the callback dropbox.html and dropbox_lib.js. This code will put these two files in the root dist. So you should be able to hit http://example.com/dropbox.html

I haven't figured out how to put the css used in the main angular app into this html file.

PS I'm pretty new to webpack

surya · Accepted Answer · 2017-05-26 18:17:07Z

1

This is what i ended up doing, I used ejs filetype as template

new HtmlWebpackPlugin({
  filename: 'dropbox.html',
  template: 'src/redirect.ejs',
  chunks:['polyfills','dropbox','lib'],
  //model for ejs
  redirectPage:'Dropbox'
})

then inside dropbox.template.ejs

<script>
  var redirectPage = '<%= htmlWebpackPlugin.options.redirectPage %>';//'Dropbox'
</script>

answered May 26, 2017 at 18:17

surya

1,3591 gold badge13 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to configure Webpack for multiple html files with common js and html specific js?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related