React App Rewire Multiple Entry lets you configure multiple entry in Create React App v1, v2 and v3 without ejecting.
Add React App Rewire Multiple Entry to your Rewired React app:
npm install @richardo2016/react-app-rewire-multiple-entry --save-dev
Next, add React App Rewire Multiple Entry to config-overrides.js
in your React app
directory:
// config-overrides.js
const multipleEntry = require('@richardo2016/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('@richardo2016/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('@richardo2016/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 @richardo2016/react-app-rewire-multiple-entry
, the entry in the array has attributes below:
entry
[Required] Webpack entry JS file. Throw error when empty.hash
[Optional] Whether use hash in output name for this entry.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)
addMultiEntry
Inject settings for multiple entry in webpack config
That’s it! Now you can control mulitple entry, enjoy coding!
NOTICE This repo is forked from 's Derek-Hu/react-app-rewire-multiple-entry, which version without any LICENSE.