react-app-rewire-multiple-entry
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.1 • Public • Published

    React App Rewire Multiple Entry lets you configure multiple entries in Create React App without ejecting.

    Usage

    1. Add React App Rewire Multiple Entry to your Rewired React app:
    npm install --save-dev react-app-rewired react-app-rewire-multiple-entry
    For create-react-app 1.x or react-scripts-ts with Webpack 3:
    $ npm install --save-dev react-app-rewired@1.6.2
    1. Modify package.json
      "scripts": {
    -   "start": "react-scripts start",
    +   "start": "react-app-rewired start",
    -   "build": "react-scripts build",
    +   "build": "react-app-rewired build",
    -   "test": "react-scripts test",
    +   "test": "react-app-rewired test",
        "eject": "react-scripts eject"
    }
    1. Add React App Rewire Multiple Entry to config-overrides.js in your React app directory:

    Basic Usage

    // config-overrides.js
     
    const multipleEntry = require('react-app-rewire-multiple-entry')([
      {
        entry: 'src/entry/landing.js',
        template: 'public/landing.html',
        outPath: '/landing.html'
      }
    ]);
     
    module.exports = {
      webpack: function(config, env) {
        multipleEntry.addMultiEntry(config);
        return config;
      }
    };

    Work with customize-cra

    // config-overrides.js
     
    const multipleEntry = require('react-app-rewire-multiple-entry')([
      {
        entry: 'src/entry/landing.js',
        template: 'public/landing.html',
        outPath: '/landing.html'
      }
    ]);
     
    const {
      // addBundleVisualizer,
      override,
      overrideDevServer 
    = require('customize-cra');
     
    module.exports = {
      webpack: override(
        multipleEntry.addMultiEntry
        // addBundleVisualizer()
      )
    };

    More Examples

    // config-overrides.js
     
    const multipleEntry = require('react-app-rewire-multiple-entry')([
      {
        // Webpack extra entry
        entry: 'src/entry/standard.js',
        // HTML template used in plugin HtmlWebpackPlugin
        template: 'src/entry/standard.html',
        // The file to write the HTML to. You can specify a subdirectory
        outPath: '/entry/standard.html'
        // Visit: http[s]://localhost:3000/entry/standard.html
      },
      {
        entry: 'src/entry/login.js',
        // if [template] is empty, Default value: `public/index.html`
        // template: 'public/index.html',
        outPath: 'public/login.html'
        // Visit: http[s]://localhost:3000/public/login.html
      },
      {
        entry: 'src/entry/404.js',
        template: 'public/404.html'
        // if [outPath] is empty, calculated by `path.relative(process.cwd(), template)` --> `public/404.html`
        // outPath: '/public/404.html'
        // Visit: http[s]://localhost:3000/public/404.html
      },
      {
        entry: 'src/entry/home.js'
        // Default value: `public/index.html`
        // template: 'public/index.html',
        // Calculated by `path.relative(process.cwd(), template)` --> `public/index.html`
        // outPath: '/public/index.html'
        // Visit: http[s]://localhost:3000/public/index.html
      }
    ]);
     
    module.exports = {
      webpack: function(config, env) {
        multipleEntry.addMultiEntry(config);
        return config;
      }
    };

    API

    Options

    You can pass a array of entry configuration options to react-app-rewire-multiple-entry, the entry in the array has attributes below:

    • entry [Required] Webpack entry JS file. Throw error when empty.
    • template [Optional] HTML template used in plugin HtmlWebpackPlugin. Default value: public/index.html.
    • outPath: [Optional] The file wirte the HTML to. You can specify a subdirectory. If empty, it will be calculated by path.relative(process.cwd(), template)

    Method

    • addMultiEntry Inject settings for multiple entry in webpack config

    That’s it! Now you can control mulitple entries, enjoy coding!


    Install

    npm i react-app-rewire-multiple-entry

    DownloadsWeekly Downloads

    2,342

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    23 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar