在 webpack Context Resolve vue 找不到模块

当使用 webpack 进行打包时，可能会遇到在 webpack context resolve vue 找不到模块的问题。这个问题的原因可能是缺少依赖，或者缺失 module resolver 的设置等原因。

在解决这个问题之前，我们需要先了解一下 webpack context 和 module resolver 的概念。

Webpack Context

webpack context 是指 webpack 在打包时解析文件的目录，默认情况下是项目根目录。webpack 通过 context 作为解析模块请求的基本路径。如果不指定 context，webpack 会使用当前工作目录作为 context。

在使用 webpack context 配置时，需要注意以下几点：

• 以相对路径作为 context，需要用于解析 entry、loader、plugin 等路径。
• 修改 context 之后，entry 中的路径也会相应地被更新。

Module Resolver

module resolver 是一个 npm 包，用于在导入文件时解决路径问题，它可以提高开发效率，避免写冗余的相对路径，减少维护成本。

module resolver 支持以下功能：

• 自定义别名(alias)。
• 以自定义路径解析模块。
• 支持 webpack alias。
• 支持自定义后缀名。
• 支持复杂的路径映射，如对于 /components/MyComponent，应该从 src/components/MyComponent.js 导入。

解决方法

出现此问题时，有以下几种可能的解决方法:

检查依赖

首先需要检查所需依赖是否都已经安装，可以通过执行 npm install 或者 yarn install 来安装缺失的依赖。

配置 module resolver

如果检查依赖后还是无法解决问题，那么可以尝试在 webpack 配置文件中配置 module resolver。

以 webpack 4 为例，可以通过以下步骤配置 module resolver:

1. 安装 module resolver：npm install --save-dev eslint-import-resolver-webpack 或 yarn add --dev eslint-import-resolver-webpack
2. 在配置文件中添加 resolve 属性，其中包括 resolver 和 alias 的相关配置：

module.exports = {
  // ...
  resolve: {
    // ...
    // 定义解析模块时应该查找的目录列表
    modules: ['node_modules', 'src'],

    // 定义文件扩展名，这样在导入文件时就可以省略文件后缀
    extensions: ['.js', '.vue', '.json', '.less'],
    
    // 配置 module resolver
    plugins: [
      new ModuleResolverPlugin({
        alias: {
          // 配置别名
          '@': path.resolve(__dirname, 'src') 
        },
        // 配置自定义解析路径 
        customResolveOptions: {
          moduleDirectory: 'src'
        },
        // 指定解析器 
        resolver: 'webpack'
      })
    ]
  }
  // ...
}

到此，已经完成了在 webpack context resolve vue 找不到模块的问题的解决。

总结：

通过安装缺失的依赖或者在 webpack 配置文件中开启 module resolver，可以解决在 webpack context resolve vue 找不到模块的问题。配置 module resolver 可以减少使用 webpack 进行打包时的路径问题，提高开发效率。