我让它工作了。供将来参考（使用 react 16.7.0 & yarn 1.10.1）...

创建一个react应用程序：

npx create-react-app my-app
cd my-app
yarn build

都好？酷，运行eject以便您可以访问 webpack 配置：

yarn eject
rm -rf build node_modules
yarn install
yarn build

添加此项目并更新 webpack：

yarn add html-webpack-plugin@4.0.0-beta.4
yarn add html-webpack-inline-source-plugin@1.0.0-beta.2

编辑config/webpack.config.js：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin'); <--- add this
...
plugins: [
  new HtmlWebpackPlugin(
    Object.assign(
      ...
      isEnvProduction
        ? {
            inlineSource: '.(js|css)$', <-- add this
            minify: {
              ...
  ),
  ...
  isEnvProduction &&
    shouldInlineRuntimeChunk &&
    new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin), <--- add this
    new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
    ...

运行rm -rf build && yarn build && serve -s build-index.html您加载的现在应该包含内联的所有 js 和 css 内容。请注意，静态文件仍然在构建目录中创建，但页面不使用它们。

为此目的创建了一个 Webpack 插件：

https://www.npmjs.com/package/html-webpack-inline-source-plugin

正如 README 指定的，这必须与 html-webpack-plugin 一起使用，并且您必须指定inlineSource传入的：

plugins: [
  new HtmlWebpackPlugin({
        inlineSource: '.(js|css)$' // embed all javascript and css inline
    }),
  new HtmlWebpackInlineSourcePlugin()
]

以前的答案不起作用，因为html-webpack-inline-source-plugin作者不再支持，取而代之的是官方插件html-inline-script-webpack-plugin和html-inline-css-webpack-plugin. 以下方法适用于截至 2021 年 10 月的最新 React 17。步骤：

创建一个 React 应用

create-react-app my-app
cd my-app
yarn
yarn start

确保它正常工作，您对输出感到满意。然后，弹出你的配置（我认为这可以在不弹出配置的情况下完成，但我懒得去查找如何配置 CRA）

yarn eject
rm -rf build node_modules
yarn
yarn build

然后，添加 Webpack 插件（假设您想要在此处嵌入 CSS 和脚本，如果您只想要另一个，只需删除一个）

yarn add html-inline-css-webpack-plugin -D
yarn add html-inline-script-webpack-plugin -D

最后，将这些添加到 Webpack 配置中config/webpack.config.js。首先在文件顶部声明它们：

const HTMLInlineCSSWebpackPlugin = require('html-inline-css-webpack-plugin').default;
const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');

然后将它们添加到plugins: [...]集合中。new InlineChunkHtmlPlugin在此之后搜索并添加它们：

      isEnvProduction &&
        shouldInlineRuntimeChunk &&
        new HTMLInlineCSSWebpackPlugin(),
      isEnvProduction &&
        shouldInlineRuntimeChunk &&
        new HtmlInlineScriptPlugin(),

注意：包含isEnvProduction/shouldInlineRuntimeChunk检查很重要！如果你跳过这些，当你运行yarn start. 您只想在生产模式下嵌入脚本，而不是在开发过程中。

现在，如果你运行，yarn build你会发现所有的 CSS 和 JS 嵌入在build/index.html. 如果您运行yarn start它，它将启动一个您可以在其中进行开发的热重载开发环境。