rc-node-compose

rc-node-compose is an npm package designed to simplify the process of bundling and compiling React code into a single JavaScript file using Webpack. This package integrates Babel and CSS loaders, along with Webpack's style and output configurations, making it easier to manage production builds.

Installation

You can install the rc-node-compose package using npm or yarn:

npm install rc-node-compose --save-dev
# or
yarn add rc-node-compose --dev

## Usage

const path = require("path");
const webpackBundle = require("rc-node-compose");

const bundleOutputDir = "./dist";

module.exports = (env) => {
  return [
    {
      entry: "./src/index.js", // Entry point of your React app
      mode: "production", // Production build for optimized output
      output: {
        filename: "widget.js", // Output file name
        path: path.resolve(bundleOutputDir), // Output directory
      },
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/, // Rule to handle JS/JSX files
            exclude: /node_modules/,
            use: {
              loader: webpackBundle.babelLoaderPath, // Use Babel loader from rc-node-compose
            },
          },
          {
            test: /\.css$/i, // Rule to handle CSS files
            use: [webpackBundle.styleLoaderPath, webpackBundle.cssLoaderPath], // Use style and css loaders
          },
        ],
      },
    },
  ];
};

Build Command

Once your webpack.config.js file is set up, you can build your project using the following npm command:

npx webpack --config webpack.config.js

Customizing the Webpack Configuration

You can customize the Webpack configuration further by modifying the webpack.config.js file. For example, you can add more loaders or plugins based on your project's needs.

Example of Disabling Minification

To disable minification in the production build, you can uncomment the optimization section like this:

optimization: {
  minimize: false,
},