Question

我正在使用webpack构建单页应用，以使用HtmlWebpackPlugin构建main.<hash>.js，main.<hash>.css和index.html。

这会将包注入index.html

<script type="text/javascript" src="/static/js/main.4d67bd1c.js"></script>

在体内，

<link href="/static/css/main.f6908217.css" rel="stylesheet">

在头上。

如何在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
    }
})

（这基本上是直接来自create-react-app）

Answer 1

html-webpack-plugin尊重您的webpack配置的output.publicPath选项。您可以设置主机的公共路径，它会自动将其添加到资产中。例如，使用此配置：

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

捆绑包括：

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

如果您更喜欢使用自定义模板，则可以按如下方式添加包（如default template中所示）：

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

您可以将主机添加到src。对于CSS，请参阅default template - CSS。在这种情况下，您还应该设置inject: false，因此它不会再次添加它们。

从不同主机加载捆绑包

1 个答案: