如何告诉 web pack 使用外部 js 文件 url 而不会冻结在包中？

如何解决如何告诉 web pack 使用外部 js 文件 url 而不会冻结在包中？

有一个简单的任务：我想尝试制作一个 Google Chromecast 接收器应用程序（即 SPA）。 Google Chromecast SDK (cast SDK) requires 他们的框架要放在外部 url 上。此框架还创建了全局 cast 对象。

创建这个 webpack 应用程序的正确方法是什么？我想达到的目标：

使用 index.html 构建 HtmlWebpackPlugin
使用导入此框架 (import cast from ???) 进行开发
避免捆绑它（可能使用 externals）？
确保此 js 文件创建的 cast 对象是全局的 (ProvidePlugin?)
将 <script src="http://cdn....js"></script> 添加到 HtmlWebpackPlugin 创建的 HTML 中

现在我正在尝试设置简单的应用程序，但我在最后一步卡住了 - 添加 <script> 标签到输出 html，但我确定我在上一步中犯了错误。

你能帮助指导我完成这个过程吗？

我当前的 webpack.config.js 是：

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',module: {
    rules: [
      { test: /\.svg$/,use: 'svg-inline-loader' },{ test: /\.css$/,use: [ 'style-loader','css-loader' ] },{ test: /\.(js)$/,use: 'babel-loader' }
    ]
  },output: {
    path: path.resolve(__dirname,'dist'),filename: 'index_bundle.js'
  },plugins: [
    new HtmlWebpackPlugin({
      scriptLoading: 'defer',hash: true,}),new webpack.ProvidePlugin({
      cast: path.resolve(path.join(__dirname,'src/cast_receiver_framework'))
    }) 
  ],mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',devServer: {
    compress: false,disableHostCheck: true
 },externalsType: 'script',externals: {
  cast_receiver_framework: ['//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js','cast']
 }
}

解决方法

要解决您的最后一步，您可以使用 template 的 HtmlWebpackPlugin 参数来自定义您的模板。

默认情况下，HtmlWebpackPlugin 将在 <body> 的末尾注入捆绑模块。

如果您需要进一步自定义，请选中 documentation。

index.html


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <!-- Whatever else you might need -->
    </head>
    <body>
        <div id="your-mount-point-id"></div>

        <script src="http://cdn....js"></script>
    </body>
</html>

webpack.config.js

plugins: [
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname,"path/to/index.html"),scriptLoading: 'defer',hash: true,})
],