這次給大家帶來如何對於create-react-app修改為多頁面支持，對於create-react-app修改為多頁面支持的注意事項有哪些，下面就是實戰案例，一起來看一下。
修改dev流程
在已經透過create-react-app產生專案的基礎下yarn 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
看下html對應產生對不對，正常是OK的。
增加功能
sass支援(此參考create-react-app的文檔，注意不要直接複製文檔裡面的"start": "react-scripts start" , "build": "react-scripts build",因為我們前面已經yarn eject,所以這樣用的話是有問題的可以自行體驗一下)
// 增加模块
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",
登入後複製
html引入模組
yarn add html-loader
<!--index.html-->
<%= require('html-loader!./partials/header.html') %>
登入後複製
html裡可以寫img支援打包到build，如果不寫的話是無法打包的，除非你在js裡面require
<img src="<%= require('../src/imgs/phone.png') %>" alt="">
登入後複製
後面還要取消hash之類的配置，這個就不記錄了。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
應該如何建構webpack react開發環境
#怎麼使用JS實作3des base64加密解密演算法
以上是如何對於create-react-app修改為多頁面支持的詳細內容。更多資訊請關注PHP中文網其他相關文章！
