Question

我想构建一个React应用，并将静态的CSS和JS文件有效地嵌入到我调用yarn build时生成的 index.html 中。

我显然可以破解输出，并用内联版本替换<script src"...和<link href="/static/css/...标签，但是希望有一个更优雅的解决方案。

Answer 1

有一个为此目的创建的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()
]

Answer 2

我知道了。供将来参考（使用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 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内容。请注意，静态文件仍在构建目录中创建，但页面未使用它们。

有没有一种方法可以在单个html文件中构建React应用？

2 个答案: