React进阶（附录一）构建工具改造过程记录

R G L

项目地址： https://github.com/yangbo5207/react-advance

• 使用create-react-app初始化项目，并运行yarn eject暴露配置。

• 新增多页面支持 / 顺便新增别名配置

修改config/paths.js为：

'use strict';

const path = require('path');
const fs = require('fs');
const url = require('url');
const glob = require('glob');

// cwd  执行当前命令的文件夹的地址
// __dirname 当前文件的文件夹地址
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

const envPublicUrl = process.env.PUBLIC_URL;

function ensureSlash(path, needsSlash) {
  const hasSlash = path.endsWith('/');
  if (hasSlash && !needsSlash) {
    return path.substr(path, path.length - 1);
  } else if (!hasSlash && needsSlash) {
    return `${path}/`;
  } else {
    return path;
  }
}

// 可能会出现的一些模块文件夹，将会在resolve.modules中配置
const nodePaths = (process.env.NODE_PATH || '')
  .split(process.platform === 'win32' ? ';' : ':')
  .filter(Boolean)
  .map(resolveApp);

// 为多页系统提供入口，遍历src中的js文件，每个js文件将会对应同名的html文件成为一个页面
const entries = {};

glob.sync(resolveApp('src/!(_)*.js?(x)')).forEach(file => {
  const basename = path.basename(file).replace(/\.jsx?$/, '');
  entries[basename] = file;
})

/*
like this
entries = {
  index: '/Users/yangbo/develop/react-advance/src/index.js',
  free: '/Users/yangbo/develop/react-advance/src/free.js',
  ...
}
*/

// 在public文件夹中遍历html文件，每个html将会成为一个页面
const pageEntries = glob.sync(resolveApp('public/!(_)*.html'))
  .map(file => path.basename(file, '.html')); // index.html -> index

// 别名
const alias = {
  components: resolveApp('src/components'),
  pages: resolveApp('src/pages'),
  utils: resolveApp('src/utils')
}


const getPublicUrl = appPackageJson =>
  envPublicUrl || require(appPackageJson).homepage;

// We use `PUBLIC_URL` environment variable or "homepage" field to infer
// "public path" at which the app is served.
// Webpack needs to know it to put the right