如何从 react-create-app 创建一个包文件

Question

我正在尝试将 react-create-app 构建到一个文件中（包括 JS、CSS、PNG 等...）。

有可能吗？

我应该尝试使用 rollup 还是可以使用 webpack？

我测试了 https://www.npmjs.com/package/html-webpack-inline-source-plugin，但看起来已经过时且无法正常工作。

Answer 1

是的，可以使用 CRA (create-react-app) 和 webpack 来做到这一点。我将在下面详细说明我已经开始工作的 3 个选项。

设置 - 安装 react-app-rewired

下面的每个选项都使用 react-app-rewired 来在不弹出的情况下在 create-react-app 中自定义 webpack 配置。第一步，按照 https://github.com/timarney/react-app-rewired#how-to-rewire-your-create-react-app-project

上的安装说明进行操作

如果您已经弹出或想要弹出，您仍然可以使用下面的任何选项，您只需直接在 config/webpack.config.js 中修改插件，而不是通过编程方式react-app-rewired 的配置-overrides.js.

注：以下两个选项有require('html-webpack-plugin')。不要 yarn 添加这个，以确保您获得 create-react-app 安装的版本。

选项 1 - 使用 html-webpack-inline-source-plugin

对于这个，我必须手动指定最新的测试版。当我运行 npm install --save html-webpack-inline-source-plugin 没有指定版本时，我得到了 0.0.10 版本但失败了。

安装 react-app-rewired（参见上面的设置部分）
yarn add html-webpack-inline-source-plugin@1.0.0-beta.2
编辑配置-overrides.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

module.exports = function override(config, env) {
  if (env === 'production') {
    config.plugins
      .find(plugin => Object.getPrototypeOf(plugin).constructor.name === 'HtmlWebpackPlugin')
      .options.inlineSource = '.(js|css)$'
    config.plugins.push(new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin))
  }
  return config
}

注意：此插件未得到积极维护（请参阅 https://github.com/dustinjackson/html-webpack-inline-source-plugin#readme 顶部的注释）但它对我有用。

选项 2 - 使用 script-ext-webpack-plugin and style-ext-html-webpack-plugin

安装 react-app-rewired（参见上面的设置部分）
yarn add script-ext-html-webpack-plugin style-ext-html-webpack-plugin
编辑配置-overrides.js:

const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin')

module.exports = function override(config, env) {
  if (env === 'production') {
    config.plugins.push(new ScriptExtHtmlWebpackPlugin({
      inline: /.+[.]js/
    }))
    config.plugins.push(new StyleExtHtmlWebpackPlugin())
  }
  return config
}

注意：如果您没有任何 .css 文件，此选项将失败 (StyleExtHtmlWebpackPluginError: StyleExtHtmlWebpackPlugin: could not find ExtractTextWebpackPlugin's generated .css file)。如果是这样，只需注释掉或删除这两行

//const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin')
{...}
    //config.plugins.push(new StyleExtHtmlWebpackPlugin())

选项 3 - 使用 react-dev-utils/InlineChunkHtmlPlugin

安装 react-app-rewired（参见上面的设置部分）
（这里不需要添加纱线，因为 react-dev-utils 是 create-react-app 的一部分）
编辑配置-overrides.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');

module.exports = function override(config, env) {
  if (env === 'production') {
    config.plugins.push(new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.+[.]js/]))
  }
  return config
}

注意：此选项只会内联 js 文件，而不是 css 个文件。

Answer 2

我关注了 this article，它对我很有帮助。

它使用 Gulp 将整个应用程序捆绑在一个 HTML 文件中。

安装：npm install --save-dev gulp gulp-inline-source gulp-replace
在根文件夹中创建 .env 文件。

INLINE_RUNTIME_CHUNK=false
GENERATE_SOURCEMAP=false
SKIP_PREFLIGHT_CHECK=true

在根文件夹中创建一个 gulpfile.js 文件。

const gulp = require('gulp')
const inlinesource = require('gulp-inline-source')
const replace = require('gulp-replace')

gulp.task('default', () => {
    return gulp.src('./build/*.html')
        .pipe(replace('.js"></script>', '.js" inline></script>'))
        .pipe(replace('rel="stylesheet">', 'rel="stylesheet" inline>'))
        .pipe(inlinesource({
            compress: false,
        }))
        .pipe(gulp.dest('./build'))
});

运行 npx gulp（您可以将其包含在您的 package.json build 脚本中）

如何从 react-create-app 创建一个包文件

How can I create one bundle file from react-create-app

reactjs

webpack

create-react-app

rollup

设置 - 安装 react-app-rewired

选项 1 - 使用 html-webpack-inline-source-plugin

选项 2 - 使用 script-ext-webpack-plugin and style-ext-html-webpack-plugin

选项 3 - 使用 react-dev-utils/InlineChunkHtmlPlugin