189 8069 5689
今天就跟大家聊聊有关怎么将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
// 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}`
};
});
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: entryObj,
...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
<%= require('html-loader!./partials/header.html') %>html里可以写img支持打包到build，如果不写的话是无法打包的，除非你在js里面require