create-react-app修改成多頁面支持

新公司前端就我一個，目前我的選型用react做技術棧開發前端h5頁面。最近作一個需求是pc頁面須要seo的，後端是Java開發，又不想本身用ssr作seo渲染，只好寫html給java大神改爲jsp了。然而這個又須要搞一套工做流太麻煩（太懶了），因此直接拿來create-react-app的工做流進行修改了。附上Git地址。

修改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之類的配置，這個就不記錄了。