问题描述
我正在使用 webpack 5.46 版并尝试将内联 js 代码捆绑到我的 .html 文件中。我发现的只是插件，它们不再工作或与当前的 webpack 版本不兼容。在当前时刻，我的输出是：
<head><script defer="defer" src="ui.js"></script></head><div id="react-page"></div>
但这是我想要的：
<div id="react-page"></div><script >console.log('here is my code directly in the .html file!')</script>
webpack.config.js
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.tsx',// The entry point for your UI code
code: './src/code.ts',// The entry point for your plugin code
},module: {
rules: [
// Converts TypeScript code to JavaScript
{ test: /\.tsx?$/,use: 'ts-loader',exclude: /node_modules/ },// Enables including CSS by doing "import './file.css'" in your TypeScript code
{ test: /\.css$/,use: ['style-loader',{ loader: 'css-loader' }] },// Allows you to use "<%= require('./file.svg') %>" in your HTML code to get a data URI
{ test: /\.(png|jpg|gif|webp|svg)$/,loader: 'url-loader' },],},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'],})
]
})
附言我正在创建一个 figma 插件，here 他们使用了一个过时的库，但 figma 要求所有内容直接在一个文件中
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）