React App Rewire Multiple Entry lets you configure multiple entries in Create React App without ejecting.
- Add React App Rewire Multiple Entry to your Rewired React app:
npm install --save-dev react-app-rewired react-app-rewire-multiple-entry$ npm install --save-dev [email protected]- 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"
}- Add React App Rewire Multiple Entry to
config-overrides.jsin your React app directory:
// 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()
)
};// 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;
}
};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 bypath.relative(process.cwd(), template)
addMultiEntryInject settings for multiple entry in webpack config
That’s it! Now you can control mulitple entries, enjoy coding!
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent