Skip to content
Support Multiple Entry in Create-React-App
JavaScript TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Using Array.includes Dec 5, 2019
src Using Array.includes Dec 5, 2019
.babelrc Support TS Dec 5, 2019
.eslintrc.js Support CRA Feb 23, 2019
.gitignore Support TS Dec 5, 2019
.prettierrc.js Support CRA Feb 23, 2019
README.md Update Document Nov 22, 2019
package-lock.json Using Mini Version Dec 5, 2019
package.json
tsconfig.json Support TS Dec 5, 2019

README.md

React App Rewire Multiple Entry lets you configure multiple entries in Create React App v1, v2 and v3 without ejecting.

Usage

Add React App Rewire Multiple Entry to your Rewired React app:

npm install react-app-rewire-multiple-entry --save-dev

Next, 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!


You can’t perform that action at this time.