如何让npm link与webpack协同工作？动态导入执行npm run dev报错

核心原因 #

1. webpack symlinks: false 阻断软链接路径解析
   npm link创建的是软链接，webpack的resolve.symlinks: false会禁用软链接真实路径的解析逻辑，导致动态导入moduleB时，webpack无法追踪到模块的实际位置。

2. babel-loader 未处理linked模块
   当前babel-loader配置排除了所有node_modules目录，但npm link关联的moduleA/moduleB会以软链接形式存在于项目的node_modules下，导致这些模块里的动态导入语法未被转译，webpack无法识别。

3. linked模块package.json配置缺失
   若moduleA/moduleB的package.json未正确设置main字段，或没有生成webpack可识别的编译产物，也会引发导入失败。

具体解决方案 #

1. 调整webpack symlinks配置 #

将resolve.symlinks设为true（默认值即为true，也可直接删除该配置），让webpack解析软链接的真实路径：

resolve: {
    extensions: ['.ts', '.js'],
    symlinks: true // 改为true或移除该行
},

2. 修改babel-loader的exclude规则 #

让babel处理node_modules下的moduleA和moduleB，修改exclude规则：

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules\/(?!(moduleA|moduleB)\/).*/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
    ]
},

3. 校验linked模块的package.json配置 #

• 确认moduleA/moduleB的package.json中main字段指向正确的入口文件（如编译后的dist/index.js或源码入口src/index.js）。
• 若模块使用未编译的源码，需在模块自身配置babel，或在主项目webpack中添加对应解析规则。

4. 重置链接与缓存 #

执行以下命令清理现有链接并重新关联：

# 解除现有链接
npm unlink moduleA moduleB
# 重新链接模块
npm link moduleA moduleB
# 无缓存启动dev服务
npm run dev -- --no-cache

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