我如何从react-create-app创建一个捆绑文件

Question

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

有可能，怎么办？

我应该尝试使用汇总还是可以使用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的config- 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 [email protected]
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文件。