我当前的webpack.config.js是:
有一个简单的任务:我想尝试做一个谷歌Chromecast接收器应用程序(这是SPA)。Google Chromecast SDK (cast SDK)要求他们的框架在外部url上。该框架还创建了全局cast对象。
创建这个webpack应用的正确方法是什么?我想达到的目标:
- Build
index.htmlwithHtmlWebpackPlugin - 使用导入框架(
import cast from ???)开发 - 避免捆绑它(可能使用外部)?
- 确保这个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']
}
}
要解决您的最后一步，您可以使用HtmlWebpackPlugin的template参数来定制您的模板。
默认情况下，HtmlWebpackPlugin将在<body>的末尾注入绑定模块。
如果您需要进一步定制，请查看文档。
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,
})
],