新公司前端就我一个, 目前个人选型用 react 作技术栈开发前端 h5 页面. 最近做一个需求是 pc 页面需要 seo 的, 后端是 Java 开发, 又不想自己用 ssr 做 seo 渲染, 只好写 html 给 java 大神改成 jsp 了. 然而这个又需要搞一套工作流太麻烦 (太懒了), 所以直接拿来 create-react-app 的工作流进行修改了. 附上 Git 地址 https://github.com/hnlinzhi19/webpack-multipage .
修改 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 之类的配置, 这个就不记录了.
来源: https://juejin.im/post/5afcd2bd51882542c832f155