兄弟，我看了你这两个Webpack内联的问题，刚好之前踩过几乎一模一样的坑，给你梳理下问题根因和落地的解决办法：

先给你拆解下问题为啥会出现： #

1. JS内联后原标签还在：你的Webpack入口是main: './bundle.js'，所以生成的JS是main.js，但模板里写的是bundle.js，再加上HTMLWebpackPlugin的inject: 'body'会自动注入main.js的引用，内联插件处理了自动注入的main.js，但模板里硬写的bundle.js标签因为对应文件不存在（Webpack没生成它），所以被原样保留了。
2. CSS既不内联也不生成：你用了style-loader，它会把CSS打包进JS文件里，不会生成单独的.css文件，而HtmlInlineCSSWebpackPlugin只能处理单独的CSS文件，自然就没法内联了；另外你可能没在JS里引入CSS，Webpack根本没处理CSS文件，所以dist里也看不到它。

直接上修改后的可运行配置，每一步都给你标清楚改了啥： #

首先先装个缺失的依赖，用来提取CSS文件：

npm install mini-css-extract-plugin --save-dev

然后修改你的webpack.config.js：

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const HtmlInlineCSSWebpackPlugin = require('html-inline-css-webpack-plugin').default;
const HtmlInlineScriptWebpackPlugin = require('html-inline-script-webpack-plugin');
// 新增：引入提取CSS的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 

module.exports = {
    context: path.resolve(__dirname, './internal_site/public/'),
    entry: {
        // 改这里：把入口名从main改成bundle，和模板里的文件名对应
        bundle: './bundle.js', 
        // 可选：如果你的bundle.js里没引入CSS，就把CSS也加进入口
        // bundle: ['./bundle.js', './bundle.css'],
    },
    output: {
        filename: '[name].js', // 现在生成的就是bundle.js，和模板匹配
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    // 改这里：用MiniCssExtractPlugin.loader替换style-loader，生成单独的CSS文件
                    MiniCssExtractPlugin.loader, 
                    'css-loader',
                ],
            },
        ],
    },
    plugins: [
        // 新增：配置CSS提取插件，指定生成的CSS文件名
        new MiniCssExtractPlugin({
            filename: 'bundle.css',
        }),
        new HTMLWebpackPlugin({
            template: './index.html',
            // 改这里：关闭自动注入，避免Webpack额外添加引用
            inject: false, 
            minify: {
                collapseWhitespace: true,
                removeComments: true,
            },
        }),
        // 加过滤：明确指定只内联bundle.css，避免处理其他文件
        new HtmlInlineCSSWebpackPlugin({
            filter: (filePath) => filePath.includes('bundle.css'),
        }),
        // 加过滤：明确指定只内联bundle.js
        new HtmlInlineScriptWebpackPlugin({
            filter: (filePath) => filePath.includes('bundle.js'),
        }),
    ],
    optimization: {
        minimize: true,
        minimizer: [
            new (require('terser-webpack-plugin'))({
                extractComments: false,
            }),
        ],
    },
    mode: 'production',
};

最后再补两个关键提醒： #

1. 一定要引入CSS：要么在你的bundle.js里加一行import './bundle.css';，要么把CSS文件加入entry数组里，否则Webpack根本不知道要处理CSS，自然生成不了bundle.css供内联插件使用。
2. 模板文件保留原样就行：你的index.html不用改，内联插件会自动找到bundle.js和bundle.css的引用，把它们替换成内联的代码，同时移除原来的script和link标签。

运行webpack之后，你打开dist里的index.html就能看到：JS代码内联在<script>标签里，CSS代码内联在<style>标签里，没有单独的JS和CSS文件，也不会留下多余的引用标签啦！

备注：内容来源于stack exchange，提问作者Inglocines