Skip to main content

webpack 配置模块别名

在 webpack 配置中，可以使用 resolve 来配置模块解析方式。

常用 resolve.alias 来配置模块别名，用 resolve.extensions 来解析文件后缀名。

一、resolve.alias​

resolve.alias 用于创建 import 或 require 的别名，来确保模块引入变得更简单。

1、alias 基本用法​

配置方式如下：

webpack.config.js
module.exports = {
  entry: './src/index.js',
  resolve: {
    alias: {
      '@' : path.resolve(__dirname, 'src/')
    }
  }
  // 省略其他
}

这样，就可以使用 @ 来替代 path.resolve(__dirname, 'src/') 这个路径，下面来试试效果：

首先在 src/ 目录下新增 component.js：

src/component.js
export const name = '组件'

再到 src/index.js 中引入：

src/index.js
import { name } from '@/component.js'

当然也可以根据实际情况，为不同路径设置不同别名：

webpack.config.js
alias: {
  '@' : path.resolve(__dirname, 'src/')
  'assets' : path.resolve(__dirname, 'src/assets/')
}

2、alias 精准匹配​

可以在给定对象的键后的末尾添加 $，以表示精准匹配：

const path = require('path')

module.exports = {
  //...
  resolve: {
    alias: {
      xyz$: path.resolve(__dirname, 'path/to/file.js')
    }
  }
}

匹配结果如下：

import Test1 from 'xyz';          // 精确匹配，path/to/file.js 被解析和导入
import Test2 from 'xyz/file.js';  // 非精确匹配，触发普通解析

3、常见匹配情况​

alias:import 'xyz'import 'xyz/file.js'
未设置/abc/node_modules/xyz/index.js/abc/node_modules/xyz/file.js
{ xyz: '/abc/path/to/file.js' }/abc/path/to/file.jserror
{ xyz$: '/abc/path/to/file.js' }/abc/path/to/file.js/abc/node_modules/xyz/file.js
{ xyz: './dir/file.js' }/abc/dir/file.jserror
{ xyz$: './dir/file.js' }/abc/dir/file.js/abc/node_modules/xyz/file.js
{ xyz: '/some/dir' }/some/dir/index.js/some/dir/file.js
{ xyz$: '/some/dir' }/some/dir/index.js/abc/node_modules/xyz/file.js
{ xyz: './dir' }/abc/dir/index.js/abc/dir/file.js
{ xyz: 'modu' }/abc/node_modules/modu/index.js/abc/node_modules/modu/file.js
{ xyz$: 'modu' }/abc/node_modules/modu/index.js/abc/node_modules/xyz/file.js
{ xyz: 'modu/some/file.js' }/abc/node_modules/modu/some/file.jserror
{ xyz: 'modu/dir' }/abc/node_modules/modu/dir/index.js/abc/node_modules/modu/dir/file.js
{ xyz$: 'modu/dir' }/abc/node_modules/modu/dir/index.js/abc/node_modules/xyz/file.js

二、resolve.extensions​

resolve.extensions 用来自动解析文件后缀，默认值为：

webpack.config.js
module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.json'],
  },
};

使用时就可以省略 .js / .json 文件后缀了：

import File from '../path/to/file';

当遇到 require('../path/to/file') 导入语句时，webpack 会先去寻找 ../path/to/file.js 文件，如果该文件不存在就去寻找 ../path/to/file.json 文件，如果还是找不到就报错。