create-react-app多页面配置

栏目: 服务器 · 发布时间: 6年前

使用 `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
复制代码

访问地址

使用函数优化需要手动反复添加的配置项

修改的文件

安装相关依赖

# 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,
    ]
  }
}
复制代码