create-react-app多頁面配置

時間 2019-12-04

標籤 create react app 頁面配置欄目 React 简体版

原文原文鏈接

基礎版配置

使用 `create-react-app` 快速建立 `react` 項目

# terminal
# 在命令行中執行
npx create-react-app react-mpa
複製代碼

使用 `npm run eject` 把webpack配置噴出來

# terminal
# 打開 步驟1 中生成的react-mpa項目
cd react-mpa

# 執行 噴出配置的命令
npm run eject
複製代碼

整理目錄結構並把多餘的文件刪除

在src下新建 `pages` 目錄頁面對應的路由爲index.js 的文件夾名字

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>home</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
複製代碼

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from "~/App";

ReactDOM.render(<App />, document.getElementById('root')); 複製代碼

App.js

import React from 'react';

function App() {
  return (
    <div className="App"> <h1>index</h1> </div>
  );
}

export default App;
複製代碼

修改 `config/webpack.config.js` 的配置

紅線標出被修改的屬性

return {
// ... 其餘配置

// webpack js編譯的入口文件 有多少個路由 就有多少個 入口js
// 莫慌 後續會用 函數 生成對應配置 不用手動添加
entry: {
  index: [
    isEnvDevelopment &&
      require.resolve('react-dev-utils/webpackHotDevClient'),
    `./src/pages/index/index.js`,
  ],
  home: [
    isEnvDevelopment &&
      require.resolve('react-dev-utils/webpackHotDevClient'),
    `./src/pages/home/index.js`,
  ],
  bathroom: [
    isEnvDevelopment &&
      require.resolve('react-dev-utils/webpackHotDevClient'),
    `./src/pages/bathroom/index.js`,
  ],
},

// 只改了兩項 不知道爲何 默認的 [contenthash] 報錯了，因此改爲 [hash] 
output: {
  filename: isEnvProduction
    ? 'static/js/[name]/[name].[hash:8].js'
    : isEnvDevelopment && 'static/js/[name]/[name].[hash:8].js',
  chunkFilename: isEnvProduction
    ? 'static/js/[name]/[name].[hash:8].chunk.js'
    : isEnvDevelopment && 'static/js/[name]/[name].chunk.js',
},

// 添加了 ~ 映射 根目錄的 src 文件
resolve: {
  alias: {
    'react-native': 'react-native-web',
    '~': path.resolve(__dirname, '../src')
  },
},

// 對應着 pages 的路由修改 有多少個路由 就有多少個 HtmlWebpackPlugin
// 莫慌 後續會用 函數 生成對應配置 不用手動添加
plugins: [
  new HtmlWebpackPlugin(
    Object.assign(
      {},
      {
        inject: true,
        template: `src/pages/index/index.html`,
        filename: `index/index.html`,
      },
      isEnvProduction
        ? {
            minify: {
              removeComments: true,
              collapseWhitespace: true,
              removeRedundantAttributes: true,
              useShortDoctype: true,
              removeEmptyAttributes: true,
              removeStyleLinkTypeAttributes: true,
              keepClosingSlash: true,
              minifyJS: true,
              minifyCSS: true,
              minifyURLs: true,
            },
          }
        : undefined
    )
  ),
  new HtmlWebpackPlugin(
    Object.assign(
      {},
      {
        inject: true,
        template: `src/pages/home/index.html`,
        filename: `home/index.html`,
      },
      isEnvProduction
        ? {
            minify: {
              removeComments: true,
              collapseWhitespace: true,
              removeRedundantAttributes: true,
              useShortDoctype: true,
              removeEmptyAttributes: true,
              removeStyleLinkTypeAttributes: true,
              keepClosingSlash: true,
              minifyJS: true,
              minifyCSS: true,
              minifyURLs: true,
            },
          }
        : undefined
    )
  ),
  new HtmlWebpackPlugin(
    Object.assign(
      {},
      {
        inject: true,
        template: `src/pages/home/bathroom/index.html`,
        filename: `home/bathroom/index.html`,
      },
      isEnvProduction
        ? {
            minify: {
              removeComments: true,
              collapseWhitespace: true,
              removeRedundantAttributes: true,
              useShortDoctype: true,
              removeEmptyAttributes: true,
              removeStyleLinkTypeAttributes: true,
              keepClosingSlash: true,
              minifyJS: true,
              minifyCSS: true,
              minifyURLs: true,
            },
          }
        : undefined
    )
  )
]
}

複製代碼

修改 `script/start.js` 和 `script/build.js`

// 兩個文件都是同樣的 把校驗註釋
// 這個校驗做用是 在執行腳本前 檢測 src/index.js 文件是否存在 
// 由於咱們已經把入口文件改了 因此校驗邏輯應該是 校驗 pages 目錄
// 不過無關緊要 追求極致的能夠自行添加
// if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
// process.exit(1);
// }
複製代碼

好了基礎版配置完成試着運行一下吧

# terminal
npm start
複製代碼

訪問地址javascript

使用函數優化須要手動反覆添加的配置項

修改的文件

安裝相關依賴

# terminal
npm i --save-dev glob
複製代碼

`mpaConfig.js`

```javascript
const glob = require('glob')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

const paths = require('./paths')

/**
 * 獲取多頁面入口文件
 * @param {String} globPath 文件路徑
 * @param {Boolean} isEnvDevelopment 是否爲開發環境
 * @param {Boolean} isEnvProduction 是否爲生產環境
 */
function getMpaConfig (appMpaSrc, isEnvDevelopment, isEnvProduction) {
  const globPath = `${appMpaSrc}/**/index.js`
  const moduleNameReg = /pages\/(.*)\//i
  return glob.sync(globPath).reduce((result, entry) => {
    // 獲取模塊名稱
    const moduleName = moduleNameReg.exec(entry)[1]

    // 入口配置
    result.entry[moduleName] = [
      isEnvDevelopment &&
        require.resolve('react-dev-utils/webpackHotDevClient'),
      `./src/pages/${moduleName}/index.js`,
    ].filter(Boolean)

    // HtmlWebpackPlugin
    result.HtmlWebpackPlugin.push(new HtmlWebpackPlugin(
      Object.assign(
        {},
        {
          inject: true,
          template: `src/pages/${moduleName}/index.html`,
          filename: `${moduleName}/index.html`,
        },
        isEnvProduction
          ? {
              minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeStyleLinkTypeAttributes: true,
                keepClosingSlash: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true,
              },
            }
          : undefined
      )
    ))
    
    return result
  }, {
    entry: {},
    HtmlWebpackPlugin: []
  })
}

module.exports = {
  getMpaConfig
}
```
複製代碼

`webpack.config.js`

// 在最上方 引入 mpaConfig
const { getMpaConfig } = require('./mpaConfig')

// 獲取 多頁面的配置
module.exports = function(webpackEnv) {
  const isEnvDevelopment = webpackEnv === 'development';
  const isEnvProduction = webpackEnv === 'production';
  const mpaConfig = getMpaConfig(paths.appMpaSrc, isEnvDevelopment, isEnvProduction)
  
  // ... other code
  return {
    entry: mpaConfig.entry,
    plugins: [
      // 把全部 HtmlWebpackPlugin 的配置刪掉
      // 把 整理好的 HtmlWebpackPlugin配置展開
      ...mpaConfig.HtmlWebpackPlugin,
    ]
  }
}
複製代碼