My 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 以这种方式编译？
EDIT 1
If I use
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 版本是``[电子邮件受保护] /cdn-cgi/l/email-protection`
html-webpack-inline-source-plugin 有替代品吗？
