Webpack 从不同主机加载捆绑包

我正在使用webpack构建一个单页应用程序，用HtmlWebpackPlugin构建main..js、main..css和index.html

这会将包注入index.html，如下所示

在身体上，和

在头上

如何将主机包含在href和src中？我已经尝试过在HtmlWebpackPlugin中使用自定义模板，但我不确定如何获得编译包js/css的路径

HtmlWebpackPlugin的配置如下：

new HtmlWebpackPlugin({
    inject: true,
    template: paths.appHtml,
    minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
    }
})

这基本上是直接从CreateReact应用程序开始的，html网页包插件尊重你的网页包配置选项。您可以设置主机的公共路径，它将自动将其添加到资源中。例如，使用此配置：

output: {
  filename: '[name].[hash:6].js',
  publicPath: 'https://myhost.com/'
}

该捆绑包包括以下内容：

<script type="text/javascript" src="https://myhost.com/main.1ae0e6.js"></script>

如果您更喜欢使用自定义模板，则可以将捆绑包包括在中，如下所示：

您可以将主机添加到src。有关CSS的详细信息，请参见。在这种情况下，还应该将inject:false设置为false，这样就不会再次添加它们

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>