使用--config指定外部webpack.config.js时Webpack无法找到node_modules

这个问题我之前也碰到过，核心原因是：当你用--config指定当前项目目录外的webpack.config.js时，Webpack会将配置文件所在的目录当作Node.js的工作目录（CWD），所以它会去配置文件目录下查找node_modules，而不是你执行命令的项目目录，这就导致了依赖找不到的报错。

下面给你几个实用的解决办法，按推荐程度排序：

方法1：设置NODE_PATH环境变量（最简洁） #

在执行webpack命令时，通过环境变量告诉Node.js优先去你的项目目录下的node_modules找模块，配置文件不需要做任何修改。

不同系统的命令写法： #

• Linux/macOS：

  NODE_PATH=./node_modules webpack --config /path/to/your/external/webpack.config.js
  

• Windows 命令提示符（cmd）：

  set NODE_PATH=.\node_modules&&webpack --config D:\path\to\your\external\webpack.config.js
  

• Windows PowerShell：

  $env:NODE_PATH = ".\node_modules"; webpack --config D:\path\to\your\external\webpack.config.js
  

方法2：修改Node的模块搜索路径（配置文件层面） #

在你的外部webpack.config.js最顶部，把项目目录的node_modules添加到Node的模块搜索路径里，之后就能正常require插件了：

const path = require('path');

// 获取执行webpack命令的项目根目录
const projectRoot = process.cwd();
// 将项目的node_modules加入Node的模块搜索路径
module.paths.push(path.join(projectRoot, 'node_modules'));

// 接下来正常require插件即可
const CircularDependencyPlugin = require('circular-dependency-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...你的webpack配置
};

方法3：使用绝对路径require插件（适合插件较少的场景） #

直接在require时指定项目node_modules的绝对路径，缺点是每个插件的require都要修改：

const projectRoot = process.cwd();

const CircularDependencyPlugin = require(`${projectRoot}/node_modules/circular-dependency-plugin`);
const HtmlWebpackPlugin = require(`${projectRoot}/node_modules/html-webpack-plugin`);

方法4：配置Webpack的resolve.modules（针对模块解析） #

如果你的项目里还有业务代码的模块导入需要解析，可以在webpack配置里添加resolve.modules，告诉Webpack优先去项目目录找依赖：

module.exports = {
  // ...其他配置
  resolve: {
    modules: [
      path.join(process.cwd(), 'node_modules'),
      'node_modules' // 保留默认的搜索路径
    ]
  },
  // 注意：这个配置主要针对Webpack解析import/require的业务模块，对于插件的require，还是方法1或2更直接
};

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