Home>

I ’ll be the front end of the new company,At present, personal selection uses react as the technology stack to develop front-end h5 pages. Recently, a requirement is that the pc page needs seo, the backend is java development, and I don't want to use ssr to do seo rendering myself, so I have to write html for java god to change to jsp. However, this requires a set of workflows that are too cumbersome (too lazy), so I directly used the create-react-app workflow to modify it.Attachgit address.

Modify dev process

Based on the project that has been generated by create-react-appyarn run eject

yarn add globby for viewing html files

Modify config/paths.js

//traverse the html files in the directory under public to generate arry
const globby=require ("globby");
const htmlarray=globby.sync ([path.join (resolveapp ("public"), "/*.html")]);
//module.exports added
htmlarray

Modify config/webpack.config.dev.js

<!-Increase configuration->
//traverse the html
const entryobj=();
const htmlpluginsaray=paths.htmlarray.map ((v) =>{
 const fileparse=path.parse (v);
 entryobj [fileparse.name]=[
  require.resolve ("./polyfills"),  require.resolve ("react-dev-utils/webpackhotdevclient"),  `${paths.appsrc}/${fileparse.name} .js` ,, ]
 return new htmlwebpackplugin ({
  inject:true,  chunks:[fileparse.name],  template:`${paths.apppublic}/${fileparse.base}`,  filename:fileparse.base
 })
});
<!-Entry replaced by entryobj->
entry:entryobj
<!-Replace htmlplugin content->
//new htmlwebpackplugin ({
//inject:true,//chunks:["index"],//template:paths.apppublic+ "/index.html",//}),... htmlpluginsaray,

Modify config/webpackdevserver.config.js

//increase
const path=require ("path");
const htmlpluginsaray=paths.htmlarray.map ((v) =>{
 const fileparse=path.parse (v);
 return {
  from:new regexp (`^ \/${fileparse.base}`), to:`/build/${fileparse.base}`
 };
});
<!-Historyapifallback add rewrites->
rewrites:htmlpluginsaray

The above is the modification in dev mode.Try yarn start.

Modify product process

Modify config /

//increase
//traverse the html
const entryobj=();
const htmlpluginsaray=paths.htmlarray.map ((v) =>{
 const fileparse=path.parse (v);
 entryobj [fileparse.name]=[
  require.resolve ("./polyfills"),  `${paths.appsrc}/${fileparse.name} .js`, ];
 console.log (v);
 return new htmlwebpackplugin ({
  inject:true,  chunks:[fileparse.name],  template:`${paths.apppublic}/${fileparse.base}`,  filename:fileparse.base
 })
});
<!-Modify entry->
 entry:entryobj,<!-Replace the value of new htmlwebpackplugin->
... htmlpluginsaray,

Add a copy module (yarn add cpy )

Modify scripts/build.js

//function copypublicfolder () replace
//The original method is to copy everything under public,Because more html is added, it is no longer copied directly (copying directly will overwrite html)
const copypublicfolder=async () =>{
 await cpy ([`${paths.apppublic} /*.*`, `! ${paths.apppublic}/*. html`], paths.appbuild);
 console.log ("copy success!");
 //fs.copysync (paths.apppublic, paths.appbuild, {
 //dereference:true, //filter:file =>file! == paths.apphtml, //});
}

Testafter the above modification yarn build

Check the html corresponding generation right,Normal is ok.

add feature

sass support (this refers to the create-react-app documentation, be careful not to directly copy the "start":"react-scripts start", "build":"react-scripts build" in the documentation, because we have already ejected it earlier, so (If you use it like this, you can experience it yourself)

//add module
yarn add node-sass-chokidar npm-run-all
//package.json delete configuration
"start":"node scripts/start.js","build":"node scripts/build.js",//add scripts in package.json
"build-css":"node-sass-chokidar src/scss -o src/css","watch-css":"npm run build-css &&node-sass-chokidar src/scss -o src/css --watch --recursive","start-js":"node scripts/start.js","start":"npm-run-all -p watch-css start-js","build-js":"node scripts/build.js","build":"npm-run-all build-css build-js",

html introduction module

yarn add html-loader
<!-Index.html->
<%= require ("html-loader! ./partials/header.html")%>

In html, you can write img to support packaging to build. If you do n’t write, you cannot package.Unless you require in js

<img src="<%= require (" ../src/imgs/phone.png ")%>">

We will cancel the configuration such as hash later.This will not be recorded.

  • Previous JS implement mouse click Tab form switching effect
  • Next Net Collection Sorting An Advanced Gameplay Example Tutorial