在使用 webpack 打包 js 文件时，你可能会遇到如下错误中的一个或多个：

Module not found: Error: Can't resolve 'path' in '*'
Module not found: Error: Can't resolve 'http' in '*'
Module not found: Error: Can't resolve 'https' in '*'
Module not found: Error: Can't resolve 'fs' in '*'
Module not found: Error: Can't resolve 'assert' in '*'
Module not found: Error: Can't resolve 'buffer' in '*'
Module not found: Error: Can't resolve 'console' in '*'
Module not found: Error: Can't resolve 'constants' in '*'
Module not found: Error: Can't resolve 'crypto' in '*'
Module not found: Error: Can't resolve 'events' in '*'
Module not found: Error: Can't resolve 'os' in '*'
Module not found: Error: Can't resolve 'punycode' in '*'
Module not found: Error: Can't resolve 'process' in '*'
Module not found: Error: Can't resolve 'querystring' in '*'
Module not found: Error: Can't resolve 'stream' in '*'
Module not found: Error: Can't resolve 'string_decoder' in '*'
Module not found: Error: Can't resolve 'sys' in '*'
Module not found: Error: Can't resolve 'timers' in '*'
Module not found: Error: Can't resolve 'tty' in '*'
Module not found: Error: Can't resolve 'url' in '*'
Module not found: Error: Can't resolve 'util' in '*'
Module not found: Error: Can't resolve 'vm' in '*'
Module not found: Error: Can't resolve 'zlib' in '*'

本文将要介绍如何解决 Module not found: Error: Can't resolve '' in '' 类的错误，并以解决 webpack 中遇到的 Module not found: Error: Can't resolve 'path' in '*' 为例给予说明。

错误原因

在 webpack 打包时默认可能会用到 Node 内置函数，默认这些函数在浏览器环境中是不存在的，就会使用其他的库函数替代，这在 webpack 中称为回调（fallback），也称之为 polyfill。如上在 webpack 中遇到的 Module not found: Error: Can't resolve 'path' in '*' 错误就是没有指定 fallback 函数。

解决方法

解决在 webpack 中遇到的 Module not found: Error: Can't resolve 'path' in '*' 的方法有两种：

  • 指定 fallback 函数

  • 禁用 fallback

指定 fallback 函数

在 webpack 中遇到的 Module not found: Error: Can't resolve '' in '' 类错误中会给出提供向下兼容的解决方法，以 Module not found: Error: Can't resolve 'path' in '*' 为例，在错误信息中你能看到如下信息：

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

具体的解决方法为：

1、安装提示的软件包，以 path 为例：

npm install --save-dev path-browserify

2、修改配置文件 webpack.config.js 添加 fallback：

module.exports = {
  ...
  resolve: {
    fallback: {
      path: require.resolve("path-browserify"),
      ...
    }
  }
};
...

注：如果没有给出向下兼容的提示信息，只能使用禁用向下兼容的方法。

禁用 fallback

以 Module not found: Error: Can't resolve 'path' in '*' 为例给出解决方案：

修改配置文件 webpack.config.js 禁用 fallback：

module.exports = {
  ...
  resolve: {
    fallback: {
      path: false,
      ...
    }
  }
};
...

结语

本文以在 webpack 中遇到的 Module not found: Error: Can't resolve 'path' in '' 为例给出了解决 Module not found: Error: Can't resolve '' in '*' 这类错误的方法。