Webpack无法识别以@开头的npm模块，加载器配置问题求助

嘿，我来帮你捋捋这个问题～

首先得澄清：你遇到的错误不是@开头的npm模块本身的识别问题，而是@connect/nav这个第三方包里的代码写法有问题！你看错误提示里的代码：

module.exports = @material-ui/core/styles;

这根本不是合法的JavaScript语法啊！正常导出应该写成module.exports = require('@material-ui/core/styles');才对，这种直接写@xxx的写法Webpack肯定解析不了。

现在你的Webpack配置里，babel-loader是排除了所有node_modules目录的，所以这个有问题的包代码根本没经过转译处理。要解决这个问题，你需要让Webpack专门处理@connect/nav这个包，修改你的Webpack配置里的JS/JSX规则：

把原来的规则：

{
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
  },
},

改成：

{
  test: /\.(js|jsx)$/,
  // 排除node_modules目录，但不排除@connect/nav这个包
  exclude: /node_modules(?!\/@connect\/nav)/,
  use: {
    loader: 'babel-loader',
  },
},

这样配置后，babel-loader就会处理@connect/nav包里的代码，帮你转译掉这种不合法的语法（前提是你的Babel配置正确，比如.babelrc里已经配置了@babel/preset-env和@babel/preset-react）。

另外，如果@connect/nav是你自己维护的内部包，那最根本的解决办法是直接修复包里的代码，把错误的导出写法改成标准的require或者ES模块导入，这样就不用额外调整Webpack配置啦。

备注：内容来源于stack exchange，提问作者Lauren Cain