如何从 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')。不要添加这个，以确保您获得由 create-react-app 安装的版本。

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

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

1. 安装 react-app-rewired（参见上面的设置部分）
2. yarn add html-webpack-inline-source-plugin@1.0.0-beta.2
3. 编辑 config-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 和 style-ext-html-webpack-plugin

1. 安装 react-app-rewired（参见上面的设置部分）
2. yarn add script-ext-html-webpack-plugin style-ext-html-webpack-plugin
3. 编辑 config-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

1. 安装 react-app-rewired（参见上面的设置部分）
2. （这里不需要添加纱线，因为 react-dev-utils 是 create-react-app 的一部分）
3. 编辑 config-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 文件中。

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

INLINE_RUNTIME_CHUNK=false
GENERATE_SOURCEMAP=false
SKIP_PREFLIGHT_CHECK=true

1. 在根文件夹中创建一个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'))
});

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