webpack 5如何将JS代码内联打包到HTML文件？适配Figma插件开发需求

针对你使用webpack 5.46开发Figma插件、需要将JS全部内联到单个HTML文件的需求，推荐使用专门适配webpack 5的html-inline-script-webpack-plugin实现，该插件兼容最新版html-webpack-plugin，完全满足你的要求。

操作步骤 #

1. 安装依赖
   执行以下命令安装插件：

npm install html-inline-script-webpack-plugin --save-dev

2. 修改webpack.config.js配置
   删除原有HtmlWebpackPlugin配置中已失效的inlineSource属性，引入并新增该插件配置即可，修改后的完整配置如下：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlInlineScriptPlugin = require('html-inline-script-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"
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: './src/ui.html',
            filename: 'ui.html',
            chunks: ['ui'],
        }),
        // 配置内联规则，仅将ui chunk的JS内联到ui.html中
        new HtmlInlineScriptPlugin({
            htmlMatchPattern: [/ui.html$/],
            scriptMatchPattern: [/ui.js$/]
        })
    ]
})

效果验证 #

修改配置后重新执行打包命令，输出的ui.html将直接包含所有ui chunk的JS代码，不会再生成独立的ui.js文件，script标签不再有外部src引用，完全符合Figma插件单文件的要求。

内容的提问来源于stack exchange，提问作者Alexey