问题描述
有一个简单的任务:
我想尝试制作一个 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,})
],