如何使webpack在脚本标记中直接捆绑js，而不是通过src
如何使webpack在脚本标记中直接捆绑js，而不是通过src
提问于 2021-05-13 16:55:55
我的webpack.config.js文件现在是：
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = (env, argv) => ({
mode: argv.mode === 'production' ? 'production' : 'development',
// This is necessary because Figma's 'eval' works differently than normal eval
devtool: argv.mode === 'production' ? false : 'inline-source-map',
entry: {
ui: './src/ui.js', // The entry point for your UI code
code: './src/code.js', // The entry point for your plugin code
},
output: {
clean: true,
filename: '[name].js',
path: path.resolve(__dirname, 'dist'), // Compile into a folder called "dist"
},
// Tells Webpack to generate "ui.html" and to inline "ui.ts" into it
plugins: [
new HtmlWebpackPlugin({
template: './src/ui.html',
filename: 'ui.html',
inlineSource: '.(js)$',
chunks: ['ui'],
})
],
})和它所遵循的一个文件是：
ui.html: (这是当前问题的目标文件)
<head>
<script defer="defer" src="ui.js"></script>
</head>
<h2>Figma auto layout</h2><p>Count: <input id="count" value="5"></p>
<button id="create">Create</button>
<button id="cancel">Cancel</button><br>
<button id="create-structure">Create structure</button>我希望ui.html能像这样捆绑生成的html文件：
<h2>Figma auto layout</h2><p>Count: <input id="count" value="5"></p>
<button id="create">Create</button>
<button id="cancel">Cancel</button><br>
<button id="create-structure">Create structure</button>
++ <script>
++ // here is js code from ui.js
++ </script>我怎么能让webpack这样编译呢？
编辑1
如果我用
plugins: [
new HtmlWebpackPlugin({
template: './src/ui.html',
filename: 'ui.html',
inlineSource: '.(js)$',
chunks: ['ui'],
}),
new HtmlWebpackInlineSourcePlugin()
]它会返回一个错误(我已经安装了这个插件)
[webpack-cli] TypeError: Cannot read property 'getHooks' of undefined我知道这需要webpack 5。我的webpack版是-@5.33.2‘
html-webpack-inline-source-plugin?的任何替代
回答 1
Stack Overflow用户
发布于 2022-01-26 15:53:06
以下是我在面对类似问题后发现的两种解决方案：
- 你可以使用
InlineChunkHtmlPlugin从react-dev-utils，优点是它是即插即用.大部分!在我的例子中，我正在注入的脚本包含一个</script>，它打破了页面。您可以控制脚本的发出位置(头部、正文等)。通过修改inject的HtmlWebpackPlugin属性
- 您可以使用HTML模板注入脚本，该模板可以提供给
HtmlWebpackPlugin。例如，该模板将所有JS和CSS资产插入到网页中：
doctype html
html
head
meta(charset="utf-8")
title #{htmlWebpackPlugin.options.title}
body
each cssFile in htmlWebpackPlugin.files.css
style !{compilation.assets[cssFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()}
each jsFile in htmlWebpackPlugin.files.js
script !{compilation.assets[jsFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67523174
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号