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 <script> hrefs into HTML even in
// single-page apps that may serve index.html for nested URLs like /todos/42.
// We can't use a relative path in HTML because we don't want to load something
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
function getServedPath(appPackageJson) {
  const publicUrl = getPublicUrl(appPackageJson);
  const servedUrl =
    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
  return ensureSlash(servedUrl, true);
}

// config after eject: we're in ./config/
module.exports = {
  dotenv: resolveApp('.env'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveApp('src/index.js'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveApp('src/setupTests.js'),
  appNodeModules: resolveApp('node_modules'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),

  // 可能会与上面的有重复，略过
  root: resolveApp(''),
  build: resolveApp('build'),
  public: resolveApp('public'),
  appHTML: resolveApp('public/index.html'),
  pkg: resolveApp('package.json'),
  src: resolveApp('src'),
  static: resolveApp('static'),
  nodeModules: resolveApp('node_modules'),
  nodePaths: nodePaths,
  alias: alias,
  entries: entries,
  pageEntries: pageEntries
};

涉及到的改动如图

红色删除，绿色新增

引入glob 遍历入口 别名配置 对外提供可能需要的路径配置

于此同时，还需要对应修改config/webpack.config.dev.js;

引入 定义一些变量，用以修改配置 替换entry配置如图 修改output配置 修改alias配置 修改plugins配置

webpack.config.prod.js的配置改动请直接到项目中查看

OK，这样就能够支持多页面应用了。具体代码可以在github项目中查看。

执行后发现bug： index.html编译之后将其他页面的js文件也引入了。
修复如下：

删除重复的插件

新增scss，sass支持

如果所示

如图所示， CSS的loader配置比较长，因此当我们需要新增scss支持时可以简单封装一下

function getCssRule(extraRule) {
  const rules = [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: extraRule ? 2 : 1,
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9', // React doesn't support IE8 anyway
            ],
            flexbox: 'no-2009',
          }),
        ],
      },
    },
  ];

  if (extraRule) {
    rules.push(extraRule);
  }

  return rules;
}

那么在配置中就可以这样使用

{
  test: /\.css$/,
  use: getCssRule()
},

那么如果想要新增sass的支持，则只需要安装对应的loader，然后新增配置就可以了

yarn add sass-loader node-sass  

{
  test: /\.s[ac]ss$/,
  use: getCssRule('sass-loader')
},
{
  test: /\.less$/,
  use: getCssRule('less-loader')
},