How to modify create-react-app to support multiple pages-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to modify create-react-app to support multiple pages

May 28, 2018 pm 03:54 PM

Revise

This time I will show you how to modify create-react-app to support multi-page, and what are the precautions for modifying create-react-app to support multi-page. The following is a practical case. Let’s take a look.

Modify the dev process

Based on the project that has been generated through create-react-app

yarn run eject

yarn add globby Used to view html files

Modify config/paths.js

//遍历public下目录下的html文件生成arry
const globby = require('globby');
const htmlArray = globby.sync([path.join(resolveApp('public'), '/*.html')]);
//module.exports 里面增加
htmlArray

Copy after login

Modify config/webpack.config.dev.js

&lt;!--增加配置--&gt;
// 遍历html
const entryObj = {};
const htmlPluginsAray = paths.htmlArray.map((v)=&gt; {
 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
 })
});
&lt;!--entry 替换为entryObj--&gt;
entry：entryObj
&lt;!--替换htmlplugin内容--&gt;
// new HtmlWebpackPlugin({
//  inject: true,
//  chunks: ["index"],
//  template: paths.appPublic + '/index.html',
// }),
...htmlPluginsAray,

Copy after login

Modify config/webpackDevServer.config.js

// 增加
const path = require('path');
const htmlPluginsAray = paths.htmlArray.map((v)=&gt; {
 const fileParse = path.parse(v);
 return {
  from: new RegExp(`^\/${fileParse.base}`), to: `/build/${fileParse.base}`
 };
});
&lt;!--historyApiFallback 增加 rewrites--&gt;
rewrites: htmlPluginsAray

Copy after login

The above are the modifications in dev mode, try yarn start.

Modify product process

Modify config/

//增加
// 遍历html
const entryObj = {};
const htmlPluginsAray = paths.htmlArray.map((v)=&gt; {
 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
 })
});
&lt;!--修改entry--&gt;
 entry: entryObj,
&lt;!--替换 new HtmlWebpackPlugin 这个值--&gt;
...htmlPluginsAray,

Copy after login

Add copy module (

yarn add cpy)

Modify scripts/build.js

 // function copyPublicFolder () 替换
// 原来的方法是复制public下所有的内容，因为增加了多html 所以不再直接复制过去(直接复制会覆盖html)
const copyPublicFolder = async() =&gt; {
 await cpy([`${paths.appPublic}/*.*`, `!${paths.appPublic}/*.html`], paths.appBuild);
 console.log('copy success!');
 // fs.copySync(paths.appPublic, paths.appBuild, {
 //  dereference: true,
 //  filter: file =&gt; file !== paths.appHtml,
 // });
}

Copy after login

After the above modification, test it

yarn build

Check whether the html corresponding generation is correct, it is normal.

Added function

sass support (refer to the document of create-react-app, be careful not to directly copy the "start" in the document: "react-scripts start" , "build": "react-scripts build", because we have yarn eject before, so there are problems if you use it like this. You can try it yourself)

// 增加模块
yarn add node-sass-chokidar npm-run-all
// package.json删除配置
"start": "node scripts/start.js",
"build": "node scripts/build.js",
// package.json里面增加scripts
"build-css": "node-sass-chokidar src/scss -o src/css",
"watch-css": "npm run build-css &amp;&amp; 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 after login

htmlIntroducing modules

yarn add html-loader
&lt;!--index.html--&gt;
&lt;%= require(&#39;html-loader!./partials/header.html&#39;) %&gt;

Copy after login

html You can write img to support packaging into build. If you don't write it, it will not be packaged. Unless you cancel the hash and other configurations after require

1	`<img src="<%=` `require('../src/imgs/phone.png') %>" alt="">`

Copy after login

in js, this will not be recorded.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!