Home > Web Front-end > JS Tutorial > How to modify create-react-app to support multiple pages

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

php中世界最好的语言
Release: 2018-05-28 15:54:46
Original
2288 people have browsed it

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

<!--增加配置-->
// 遍历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 替换为entryObj-->
entry:entryObj
<!--替换htmlplugin内容-->
// 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)=> {
 const fileParse = path.parse(v);
 return {
  from: new RegExp(`^\/${fileParse.base}`), to: `/build/${fileParse.base}`
 };
});
<!--historyApiFallback 增加 rewrites-->
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)=> {
 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
 })
});
<!--修改entry-->
 entry: entryObj,
<!--替换 new HtmlWebpackPlugin 这个值-->
...htmlPluginsAray,
Copy after login
Add copy module (

yarn add cpy)

Modify scripts/build.js

 // function copyPublicFolder () 替换
// 原来的方法是复制public下所有的内容,因为增加了多html 所以不再直接复制过去(直接复制会覆盖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,
 // });
}
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 && 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
<!--index.html-->
<%= require(&#39;html-loader!./partials/header.html&#39;) %>
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

<img src="<%= require(&#39;../src/imgs/phone.png&#39;) %>" 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!

Recommended reading:

How to build a webpack react development environment

##How to use JS to implement 3des base64 encryption and decryption algorithm

The above is the detailed content of How to modify create-react-app to support multiple pages. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template