Question

我使用 create-react-app 创建了一个React应用。如果我运行npm run build，create-react-app将在 build / static / js 文件夹中生成3个不同的JS文件。

但是对于这个特定的应用程序，我需要将所有3个JS文件捆绑在一个文件中。

可以通过create-react-app实现吗？如果不是，将这3个JS文件捆绑为一个文件的最佳方法是什么？

Answer 1

您可以在项目的根目录下构建自己的webpack.config.js，如下所示：

const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const glob = require('glob');

module.exports = {
  entry: {
    "bundle.js": glob.sync("build/static/?(js|css)/main.*.?(js|css)").map(f => path.resolve(__dirname, f)),
  },
  output: {
    filename: "build/static/js/bundle.min.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [new UglifyJsPlugin()],
}

然后，您可以修改脚本以在package.json中构建：

"build": "npm run build:react && npm run build:bundle",
"build:bundle": "webpack --config webpack.config.js",

Answer 2

尝试使用webpack自定义构建，最小化并提供更多功能

请放弃此链接https://www.npmjs.com/package/webpack， docs：https://webpack.js.org/concepts/

create-react-app-如何捆绑JS文件

2 个答案: