score:217
create-react-app
has a very interesting setup.
i started digging in the package.json
npm script start
"start": "react-scripts start"
that takes me to their binary react-scripts
under node_modules/.bin
i'll post the relevant stuff here.
switch (script) {
case 'build':
case 'eject':
case 'start':
case 'test': {
const result = spawn.sync(
'node',
[require.resolve('../scripts/' + script)].concat(args),
{ stdio: 'inherit' }
);
so this tells me that they are looking for script inside ../scripts/
folder.
so i go to the react-scripts npm module(node_modules/react-scripts
) and open up the node_modules/react-scripts/scripts/start.js
file since i was doing npm start
.
now here is where i found the webpack config i was looking for.
they were specifically referring to node_modules/react-scripts/config/webpack.config.dev.js
. i'll post the relevant stuff here.
entry: [
// finally, this is your app's code:
paths.appindexjs,
],
plugins: [
// generates an `index.html` file with the <script> injected.
new htmlwebpackplugin({
inject: true,
template: paths.apphtml,
}),
so file referred by paths.appindexjs
is the entry file in the webpack config.
and they are using htmlwebpackplugin to load the html at the path paths.apphtml
.
final piece of the puzzle is linking this back to the files you posted.
posting relevant stuff from paths.js
const appdirectory = fs.realpathsync(process.cwd());
const resolveapp = relativepath => path.resolve(appdirectory, relativepath);
module.exports = {
...
apphtml: resolveapp('public/index.html'),
appindexjs: resolveapp('src/index.js'),
...
}
so inside your application directory,
apphtml is file public/index.html
appindexjs is file src/index.js
your two files in question.
wow! that was quite a journey..:p
update 1 - as of react-scripts@3.x
the react-scripts
binary under node_modules/.bin
has changed the logic as below. essentially doing the same thing.
if (['build', 'eject', 'start', 'test'].includes(script)) {
const result = spawn.sync(
'node',
nodeargs
.concat(require.resolve('../scripts/' + script))
.concat(args.slice(scriptindex + 1)),
{ stdio: 'inherit' }
);
the webpack configs for dev & prod has been combined into one.
const configfactory = require('../config/webpack.config');
the htmlwebpackplugin config looks like this - this is since they have to conditionally add production config on top of this
plugins: [
// generates an `index.html` file with the <script> injected.
new htmlwebpackplugin(
object.assign(
{},
{
inject: true,
template: paths.apphtml,
},
the paths file code has some updates
module.exports = {
...
apphtml: resolveapp('public/index.html'),
appindexjs: resolvemodule(resolveapp, 'src/index'),
...
};
Source: stackoverflow.com
Related Query
- How React JS index.js file contacting index.html for id references?
- How can I render HTML from another file in a React component?
- How do I configure my .htaccess file for React App in Subdirectory?
- how to import HTML file into React component and use it as a component?
- How to use one vendor chunk file (webpack) for multiple react projects
- React how to connect JS file with HTML file
- In React Typescript how to define type for ...rest parameter for native html elements?
- How to link/reference multiple scripts in an html file with react (WITHOUT NODE.js)?
- How to import react modules from an HTML file with no npm/webpack
- How to import html file into react as string?
- How to add emmet support for .mdx / markdown react file types in vscode
- How to move react event handlers to separate file ,export and then import for reuse in multiple different functional components?
- How to pass data from blade.php file to a react component using HTML element attributes?
- How can I create a configuration file for react and prevent webpack bundling it?
- How to get the file length for an file in react js
- How to translate a tsx file to a js file for React
- How to apply CSS style to HTML file that is inside the public folder of React JS
- How to configure app.yaml file for node react project in google app engine
- How I access process.env variables in react html file
- How to write Definition File for React JSX
- how to update html content dynamicaly with for loop in react js javascript
- how I can get the geoJson file for gall-peters world map for react leaflet
- How to read local html file content inside React js App using Webpack loaders?
- how to import css file in react when generating static html and inject imported css into html head tag?
- How to think in React for this example: Should I store repetitive html markup in an Array and import it into a class component?
- How can you make a conditional external script reference in the public html file in reactjs. i.e. one for production and one for staging
- How to output array with keys to my html file from promise function using React
- how to write hover in same class in css file for react js
- How to convert this.state with index for React Hooks API
- How to import external html file to React app?
More Query from same tag
- React - semantic ui dropdown with object
- Make a sidebar slide from the left side of the screen when a button is clicked with Tailwind CSS
- Display HTML special character > and | in React
- Not able to link a component in react js
- display an image from array in reactjs
- React Router on the list item
- React: multiple components with the same event handler: trying to change the state of only the component which was clicked and not of all the others
- multi level table row expand collapse react
- How to clear input field in Draft-js
- React Context - Post Like / Unlike feature
- Why memory leak happend and render slowing down when I close and re-open react component (material-table)?
- How to pass data to client using React redux and socket.io?
- How to notify other components of GraphQL mutation
- After transpilation of an ES6 module with webpack, module not exported
- Using a button to change the color of text
- Pass closeModal from one component to other with react
- react-intl not changing placeholder value
- On minimization images go down from position CSS
- jsx command not found on mac terminal
- React Refs woth setState giving Maximum update depth exceeded.
- Change values in React Context from a nested class component
- PDF returned from js api empty
- Is the reason props in React shouldn't be changed/mutated is because React wants elements to be as predictable as possible?
- Rendering dynamic rows from the input field in REACT
- Cannot read property `.then` of undefined with axios and react in actions
- How to override component styles within Mui5 theme?
- How to create new elements with React mapping props
- Create controlled input with drag&drop in react
- React typescript Object.assign return type
- Is it possible to perform more validation after validationSchema, Yup, is passed?