create-react-app - How to bundle JS files

Question

I created a React app using create-react-app. If I run npm run build, create-react-app generates 3 different JS files inside the build/static/js folder.

But for the purpose of this specific app, I need to bundle all those 3 JS files in a single file.

Is it something, which I can achieve with create-react-app? If not what would be the best way to bundle those 3 JS files to a single file?

Maybe you can try this https://github.com/facebook/create-react-app/issues/3365#issuecomment-376546407 — Nane, Oct 31 '19 at 09:20

score 9 · Answer 1 · answered Oct 31 '19 at 09:30

You can build your own webpack.config.js at the root of your project, something like this:

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()],
}

Then you can adapt the script to build in the package.json:

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

score 1 · Answer 2 · answered Jun 02 '22 at 03:18

Webpack 5 Update:

I attempted rrd answer above and ran into an error trying to install uglifyjs-webpack-plugin as I am using Webpack 5 which appears to not work past Webpack 4 and instead to use the terser-webpack-plugin which comes with Webpack 5. Below is the modified webpack.config.js to make this work with Webpack 5.

webpack.config.js

const path = require("path")
const TerserPlugin = require("terser-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"],
      },
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
}

modified build scripts in package.json

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

devDependencies in package.json

"devDependencies": {
  "css-loader": "^6.7.1",
  "glob": "^8.0.3",
  "path": "^0.12.7",
  "style-loader": "^3.3.1",
  "webpack": "^5.72.1",
  "webpack-cli": "^4.9.2"
}

How would you attach this bundle with HTML element if I want to display this react app in a HTML page? — Tan, Jan 10 '23 at 20:19

score 0 · Answer 3 · answered Oct 31 '19 at 09:29

0

Try webpack to customise build, minimize and lot more features are available

Please fallow this link https://www.npmjs.com/package/webpack, docs: https://webpack.js.org/concepts/

answered Oct 31 '19 at 09:29

Balagoni Harish

106
1
8

create-react-app - How to bundle JS files

3 Answers3