Add script file to HTML in webpack based environment

Question

I am trying to add a specific js file to my index.html when linking my production application. My webpack.common.js has the following files that are entered in html:

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

And in the plugins section, I:

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 fine. However, I do not know how to specify an additional step in the production plugins so that I can capture the additional file.

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

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

, , . https://github.com/petehunt/webpack-howto/issues/46 , , .

, html-webpack-plugin, , , , (, , : https://www.npmjs.com/package/html-webpack-plugin : https://github.com/jantimon/html-webpack-plugin).

Answer 1

webpack-merge, webpack.common.js, , entry webpack.prod.js:

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