create-react-app修改為多頁面支援

木木士鈊發表於2018-05-17
ReactAPP

新公司前端就我一個，目前個人選型用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之類的配置，這個就不記錄了。

相關文章