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:

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

For create-react-app 1.x or react-scripts-ts with Webpack 3:

1$ npm install --save-dev react-app-rewired@1.6.2

2. Modify package.json

1  "scripts": {
2-   "start": "react-scripts start",
3+   "start": "react-app-rewired start",
4-   "build": "react-scripts build",
5+   "build": "react-app-rewired build",
6-   "test": "react-scripts test",
7+   "test": "react-app-rewired test",
8    "eject": "react-scripts eject"
9}

3. Add React App Rewire Multiple Entry to config-overrides.js in your React app directory:

Basic Usage

1// config-overrides.js
2
3const multipleEntry = require('react-app-rewire-multiple-entry')([
4  {
5    entry: 'src/entry/landing.js',
6    template: 'public/landing.html',
7    outPath: '/landing.html'
8  }
9]);
10
11module.exports = {
12  webpack: function(config, env) {
13    multipleEntry.addMultiEntry(config);
14    return config;
15  }
16};

Work with customize-cra

1// config-overrides.js
2
3const multipleEntry = require('react-app-rewire-multiple-entry')([
4  {
5    entry: 'src/entry/landing.js',
6    template: 'public/landing.html',
7    outPath: '/landing.html'
8  }
9]);
10
11const {
12  // addBundleVisualizer,
13  override,
14  overrideDevServer
15} = require('customize-cra');
16
17module.exports = {
18  webpack: override(
19    multipleEntry.addMultiEntry
20    // addBundleVisualizer()
21  )
22};

More Examples

1// config-overrides.js
2
3const multipleEntry = require('react-app-rewire-multiple-entry')([
4  {
5    // Webpack extra entry
6    entry: 'src/entry/standard.js',
7    // HTML template used in plugin HtmlWebpackPlugin
8    template: 'src/entry/standard.html',
9    // The file to write the HTML to. You can specify a subdirectory
10    outPath: '/entry/standard.html'
11    // Visit: http[s]://localhost:3000/entry/standard.html
12  },
13  {
14    entry: 'src/entry/login.js',
15    // if [template] is empty, Default value: `public/index.html`
16    // template: 'public/index.html',
17    outPath: 'public/login.html'
18    // Visit: http[s]://localhost:3000/public/login.html
19  },
20  {
21    entry: 'src/entry/404.js',
22    template: 'public/404.html'
23    // if [outPath] is empty, calculated by `path.relative(process.cwd(), template)` --> `public/404.html`
24    // outPath: '/public/404.html'
25    // Visit: http[s]://localhost:3000/public/404.html
26  },
27  {
28    entry: 'src/entry/home.js'
29    // Default value: `public/index.html`
30    // template: 'public/index.html',
31    // Calculated by `path.relative(process.cwd(), template)` --> `public/index.html`
32    // outPath: '/public/index.html'
33    // Visit: http[s]://localhost:3000/public/index.html
34  }
35]);
36
37module.exports = {
38  webpack: function(config, env) {
39    multipleEntry.addMultiEntry(config);
40    return config;
41  }
42};

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!

---