根据环境将脚本文件添加到Webpack中的HTML [英] Add script file to HTML in webpack based on environment

问题描述

当我捆绑生产应用程序时，我正在尝试将特定的js文件添加到index.html中.我的webpack.common.js具有注入到html中的以下文件:

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']
    }),

对于我的webpack.prod.js，我有以下输出:

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')

但是我认为这是一种黑客手段，我认为这不是最好的方法.我看了线程 https://github.com/petehunt/webpack-howto/issues/46 ，这几乎是我想要达到的目标，但是给出的解决方案对我不起作用.

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.

我本以为可以使用html-webpack-plugin来实现，但是文档似乎没有显示如何(或者至少我可以在这里看到它:

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 ).

非常感谢您的帮助

推荐答案

由于我正在使用webpack-merge，并且所有必填文件都列在了webpack.common.js中，因此我通过添加entry元素解决了该问题webpack.prod.js:

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'
  },

这篇关于根据环境将脚本文件添加到Webpack中的HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！