I am the only front-end of the new company. At present, I use React as the technology stack to develop the front-end H5 page. Recently do a demand is THE PC page need SEO, back-end Java development, and do not want to use SSR to do SEO rendering, had to write HTML to Java god changed JSP. However, it was too cumbersome (and lazy) to create a workflow, so I used the create-React-app workflow to modify it. Attach Git address.

Modifying the Dev process

  • Yarn Run eject based on the project that has been generated through create-react-app

  • Yarn add globby Is used to view HTML files

  • Modify the config/paths. Js

Arry const globby = require('globby');
const htmlArray = globby.sync([path.join(resolveApp('public'), '/*.html')]); //module.exports added htmlArrayCopy the code
  • Modify the config/webpack config. Dev. Js
<! -- Add configuration --> // iterate over 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 replaces entryObj--> Entry: entryObj <! // new HtmlWebpackPlugin({// inject:true,
//   chunks: ["index"],
//   template: paths.appPublic + '/index.html',
// }),
...htmlPluginsAray,
Copy the code
  • Modify the config/webpackDevServer. Config. Js
// add 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}`}; }); <! -- to historyApiFallback add rewrites--> rewrites: htmlPluginsArayCopy the code

Yarn start

Modifying the Product process

  • Modify the config /
// Add // iterate over 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,Copy the code
  • Add a replication module (yarn add cpy)
  • Modify the scripts/build. Js
 // functionCopyPublicFolder () replaces // the original method is to copy all contents under public, 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, // }); }Copy the code

After the modification, test yarn Build to check whether the HTML is generated correctly. If it is normal, it is OK.

Adding features

  • Sass support (see the create-react-app documentation for details)"start": "react-scripts start", "build": "react-scripts build",Because we already haveyarn eject, so there are problems with using it this way.
// Add a module yarn add node-sass-chokidar NPM -run-all // package.json Deletes the configuration"start": "node scripts/start.js"."build": "node scripts/build.js"// add scripts to 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".Copy the code
  • HTML import module
yarn add html-loader <! --index.html--> <%= require('html-loader! ./partials/header.html') % >Copy the code
  • Img can be written in HTML and can be packaged into build. If you do not write img, it cannot be packaged unless you require it in JS
    <img src="<%= require('../src/imgs/phone.png')  %>" alt="">
Copy the code

And then we have to unhash things like that, so we don’t record that.