FB官方的cli也和vue-cli3.x开始一样，隐藏了webpack配置文件，但是官方没有提供类似vue.config.js这种配置入口，如果想扩展只能eject，所以记录一下来自社区的解决方案，通过react-app-rewired和customize-cra不用eject也可以一定程度扩展cli配置

react-app-rewired

通过配置config-overrides.js文件，来重写cli原本的配置文件

customize-cra

提供了一些便捷的配置方案，例如less、babel相关等

基本使用

yarn || npm 安装 react-app-rewired customize-cra
根目录创建config-overrides.js文件

修改package.json启动脚本命令，如下

{
    "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test",
        "eject": "react-app-rewired eject"
    }
}

支持less

<!-- 当前文件：config-overrides.js -->
<!-- 引入重写方法和添加lessloader的方法 -->
const { override, addLessLoader } = require('customize-cra')
module.exports = {
    webpack: override(
        <!-- 可以传递一个配置对象作为参数 -->
        addLessLoader()
    )
}

扩展配置

查看addLessLoader的源码，可以看到内部返回了一个函数，函数的参数是一个对象，即cli原本webpack配置的对象，然后在其基础上做我们想做的扩展，在返回该对象即可；下图为config对象
实战，添加一个支持解析md文件内容的loader，这里使用raw-loader来读取md文件原始内容，然后在具体的文件内部做其他操作
- 安装raw-loader
- 获取原始配置下rules

第一个参数是对解析器（parser）的配置，图中为关闭require.entrue；第二个是对rules解析的配置，配置当一类文件match某一个loader，处理完毕后就退出

<!-- 当前文件：config-overrides.js -->
const addMdLoader=()=>config=>{
    <!-- 获取rules数组 -->
    let rules=config.module.rules[1].oneOf
    rules.unshift({
        test: /\.txt$/i,
        use: 'raw-loader'
    })
    return config
}
module.exports = {
    webpack: override(
        addMdLoader(),
    )
}

总结

这篇笔记所有的尝试来自最初对md文件解析的整个需求，所以总结一下react or vue中怎么获取md文件内容

直接引入对应的md文件，然后fetch去取
通过配置raw-loader，然后直接获取引入的md文件即可拿到内容
通过社区的markdown-loader，然后直接引入即可那得到渲染成HTML后的内容

刷新

优雅的扩展React官方cli配置

react-app-rewired

customize-cra

基本使用

扩展配置

总结