如何在Webpack 4中用resolve.alias覆盖node_modules中的rsg-components依赖？

我之前也碰到过这个困扰——不用fork react-styleguidist完全可以实现自定义rsg-components的优先加载，核心是通过调整Webpack的模块查找规则，让你的自定义组件目录优先级高于node_modules。下面是具体的实现步骤：

1. 利用react-styleguidist的Webpack配置扩展能力 #

react-styleguidist允许我们在项目根目录的styleguide.config.js中直接修改它的Webpack配置，这是最关键的入口，完全不需要去修改源码。

2. 调整resolve.modules的查找顺序 #

Webpack默认会先去node_modules里查找模块，这就是为什么你的resolve.alias优先级不够的原因。我们可以把自定义组件所在的目录放到resolve.modules的最前面，让Webpack优先在这个目录里搜索模块。

举个例子，如果你的自定义rsg-components放在src/styleguide/rsg-components目录下，配置如下：

const path = require('path');

module.exports = {
  // 其他styleguidist配置...
  webpackConfig: {
    resolve: {
      modules: [
        // 自定义组件目录放在最前面，优先查找
        path.resolve(__dirname, 'src/styleguide/rsg-components'),
        // 然后再去node_modules找其他模块
        'node_modules'
      ]
    }
  }
};

这样，当react-styleguidist尝试导入rsg-components/XXX时，Webpack会先在你的自定义目录里找对应的组件，找不到才会去node_modules里找官方版本。

3. 针对单个组件的精确替换（可选） #

如果你只想替换某几个特定的rsg-components，而不是全部，也可以用resolve.alias做精确匹配，确保指定组件优先加载你的版本：

const path = require('path');

module.exports = {
  webpackConfig: {
    resolve: {
      alias: {
        // 精确替换Navigation组件
        'rsg-components/Navigation': path.resolve(__dirname, 'src/styleguide/rsg-components/Navigation'),
        // 替换其他组件同理
        'rsg-components/Button': path.resolve(__dirname, 'src/styleguide/rsg-components/Button')
      }
    }
  }
};

这种方式更灵活，不会影响那些你没有自定义的rsg-components。

4. 验证替换是否生效 #

你可以通过以下方式确认自定义组件是否被正确加载：

• 运行styleguidist时加上--verbose参数，查看模块的加载路径
• 使用webpack-bundle-analyzer分析打包后的模块，检查组件的来源是否是你的自定义目录

内容的提问来源于stack exchange，提问作者Dimitri Kopriwa