여러 페이지를 지원하도록 create-react-app을 수정하는 방법

이번에는 멀티 페이지를 지원하도록 create-react-app을 수정하는 방법과 멀티 페이지를 지원하도록 create-react-app을 수정할 때 주의 사항이 무엇인지 보여드리겠습니다. 바라보다.

개발 프로세스 수정

create-react-app을 통해 생성된 프로젝트를 기반으로 yarn run Ejectyarn run eject

yarn add globby 用于查看html文件

修改config/paths.js

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

修改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,

修改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

以上就是dev模式下的修改了，yarn start一下试试。

修改product流程

修改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,

增加复制模块（yarn add cpy）

修改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,
 // });
}

以上修改后测试下yarn build

yarn add globby를 사용하여 보기 html 파일

Modify config/paths.js

// 增加模块
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",

Modify config/webpack.config.dev.js

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

Modify config/webpackDevServer.config.js

<img src="<%= require(&#39;../src/imgs/phone.png&#39;) %>" alt="">

위는 dev 모드에서의 수정 사항입니다.

제품 프로세스 수정

Modify config/

rrreee

복사 모듈 추가(yarn add cpy)

Modify scripts/build.js

rrreee위 수정 후 yarn 테스트 build
html 해당 세대가 올바른지 확인하세요. 정상입니다.

기능 추가

sass 지원(create-react-app 문서를 참고하세요. "start": "react-scripts start", "build": "react-scripts build"를 직접 복사하지 않도록 주의하세요. , 이전에 실 꺼내기가 있기 때문에 이런 식으로 사용하면 문제가 있습니다. 직접 체험해 보세요.)🎜rrreee🎜html import module🎜rrreee🎜 html로 img를 작성하여 빌드할 수 있습니다. 작성하지 말고 패키징할 수 없습니다. js require🎜rrreee🎜에서 나중에 해시 및 기타 구성을 취소해야 기록되지 않습니다. 🎜🎜이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 도서: 🎜🎜🎜webpack+react 개발 환경 구축 방법🎜🎜🎜🎜🎜JS를 사용하여 3des+base64 암호화 및 복호화 알고리즘 구현 방법🎜🎜🎜

위 내용은 여러 페이지를 지원하도록 create-react-app을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!