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
2const addMultipleEntries = require('react-app-rewire-multiple-entries');
3
4const addEntries = addMultipleEntries([
5  {
6    entry: 'src/extension/content',
7    template: 'public/extension.html',
8    outPath: 'ignored/content.html'
9  },
10  {
11    entry: 'src/extension/worker',
12    template: 'public/extension.html',
13    outPath: 'ignored/worker.html'
14  }
15]);
16
17module.exports = {
18  webpack: function(config, env) {
19    addEntries(config);
20    return config;
21  }
22};

Work with customize-cra

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

More Examples

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

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!

---