Add script file to HTML in webpack based on environment

Question

I'm trying to add a specific js file to my index.html when bundling my application for production. My webpack.common.js has the following files that get injected into the html:

  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
  },

And in the plugins section I have:

new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

For my webpack.prod.js I have the following output:

output: {
    path: helpers.root('dist'),
    publicPath: '/',
    filename: '[name].[chunkhash].js',
    chunkFilename: '[id].chunk.js'
  },

And everything works just fine. However I don't know how to perhaps specify an extra step in the plugins for production so that I can grab an extra file.

As a workaround I could just use an empty file that gets replaced for production with the actual content - something like this:

new webpack.NormalModuleReplacementPlugin(/\.\/folder\.dev/, '../folder/file.prod')

But I see that as a hack and I don't think that's the best way to do that. I had a look at the thread https://github.com/petehunt/webpack-howto/issues/46 and that's pretty much what I'm trying to achieve but the solution given doesn't work for me.

I would have thought this can be achieved with the html-webpack-plugin however the docs don't seem to show how (or at least I can see that here: https://www.npmjs.com/package/html-webpack-plugin or here: https://github.com/jantimon/html-webpack-plugin ).

Any help is much appreciated

Answer 1

Since I am using webpack-merge and all mandatory files are listed in my webpack.common.js I have solved it by adding an entry element as part of my webpack.prod.js:

entry:{
      'prodOnlyFile' : './src/file.ts'
  },