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

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",