Vue 项目之 Webpack 中 Resolve 的配置（2）

codersjj
1,401 阅读3分钟

「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」。

开发中常见的配置

extensions

  • extensions 选项是解析到文件时自动添加扩展名：
    • 默认值是 ['.js', '.json', '.wasm']；
    • 所以如果我们代码中想要添加加载 .vue 或者 .jsx 或者 .ts 等文件时，我们必须自己写上扩展名；

在开发 Vue 的项目时，我们会编写很多 .vue 文件，那么每次我们导入一个 .vue 文件时都加上 .vue 后缀名可能有点麻烦，这时我们就可以在 resolve.extensions 配置选项中加上 '.vue'：

module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.json', '.wasm', '.vue']
  }
}

在 webpack.config.js 文件中像上面这样配置完 resolve.extensions 选项后，我们就可以在导入 .vue 模块时不加 .vue 后缀了（之前不加可是会报错的），比如在我们项目的 src/main.js 文件中可以将之前导入 .vue 模块的语句 import App from './vue/App.vue'; 修改如下：

import App from './vue/App';

这样一来，到时候 webpack 发现 ./vue/App 是一个文件时，就会来到 resolve.extensions 中依次匹配各个后缀名，直到匹配到了 ./vue 目录下存在的 .vue 后缀名，最终就会加载这个 App.vue 文件了。

那么我们重新运行 npm run serve 命令（上面修改了 webpack 配置文件，所以需要重新编译）启动项目，看下效果：

image-20211211155635577

可以看到，页面依然可以正常渲染。而现在，其它有导入 .vue 文件的地方其实也都可以不加 .vue 后缀了。

当然，我们之后还会写 TypeScript 代码、jsx 代码甚至是 tsx 代码，所以我们还可以把这些代码对应的文件后缀名加到 resolve.extensions 中：

module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.json', '.wasm', '.vue', '.ts', '.jsx', '.tsx']
  }
}

这样一来，到时候这些后缀名就都可以不写了。

alias

alias 配置选项也非常好用，它的作用是给路径配置别名。

在真实开发中，我们有时候会遇到导入的文件的路径层级比较深，比如像这样：

import '../../../js/element'

这种格式的路径编写起来效率可能有点低，阅读起来也可能不太友好。因此，我们通常会给某个常用的路径起个别名，通过使用这个别名来引用这个路径。拿我们项目中的代码举例，在 src/main.js 文件中有下面这行代码：

import { sum } from './js/math';

如果我们不想再写 ./，而是直接写成下面这样：

import { sum } from 'js/math';

那么现在是会报错的，因为在没有配置相应 alias 的情况下，导入模块时直接以一个名词开头而不是 ./ 开头会被当成模块路径进行解析（即会去 node_modules 目录下去寻找模块）而不是当成相对路径进行解析。

那么，如果我们想要上面以 js 开头的路径被正确地解析，就可以来配置 resolve.alias 选项：

module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.json', '.wasm', '.vue', '.ts', '.jsx', '.tsx'],
    alias: {
      js: path.resolve(__dirname, './src/js')
    }
  },
  //...
}

不过，在开发中，我们通常会配置的别名是 @，将其作为 src 目录所在的绝对路径的别名：

module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.json', '.wasm', '.vue', '.ts', '.jsx', '.tsx'],
    alias: {
      '@': path.resolve(__dirname, './src'),
      js: path.resolve(__dirname, './src/js')
    }
  },
  //...
}

这样一来，当我们在项目中导入模块，使用 @ 作为模块路径的开头时，就会将其作为项目目录下的 src 目录进行解析了。比如，在 src/main.js 文件中的下面这行代码：

import App from './vue/App';

现在就可以写成这样：

import App from '@/vue/App';

更多关于模块解析的说明以及 Resolve 的配置信息可以查阅官方文档：webpack.js.org/concepts/mo… 、webpack.js.org/configurati…

avatar
文章
阅读
粉丝