说说 webpack 的 alias 和 resolve 配置-JavaScript中文网-JavaScript教程资源分享门户

Web 开发中，为了使代码更加模块化、易于维护，我们经常会使用模块化的开发方式，将代码分成多个模块，然后通过 import 或 require 导入使用。随着项目的复杂度增加，模块间的依赖关系也越来越复杂，这时候我们就需要一个工具来辅助我们进行模块管理、打包和编译等操作，而 webpack 就是这样一个工具。在使用 webpack 构建项目时，有两个配置项 alias 和 resolve 可以帮我们优化模块解析的效率和开发体验，本文将对这两个配置项做深入详解。

alias

alias 配置能够帮助我们创建一些别名，使我们更加方便地引用某个模块或者路径。举个例子，假设我们的项目中需要频繁地使用一个名为 "lodash" 的第三方库，而该库的具体入口文件在 node_modules/lodash/lodash.js 中，我们可以通过如下配置为 "lodash" 设置一个简短的别名：

// www.javascriptcn.com code example
// webpack.config.js

module.exports = {
  // ...
  resolve: {
    alias: {
      'lodash': 'node_modules/lodash/lodash.js'
    }
  }
};

这样，我们在代码中就可以愉快地使用别名啦：

// test.js

import _ from 'lodash';

_.map([1, 2, 3], function(n) {
  return n * 2;
});

这比较简单，我们可以使用别名为特定的模块或者路径创建一个短名称。但是，如果你的项目中引用了很多第三方库，那么就需要管理很多别名，这样还是很繁琐的。

更好的方式是通过简单的写法将你的目录结构展示给 webpack。在下面的例子中，我们使用通配符将每个文件夹的别名指向它们的 src 文件夹中的 index.js 文件：

// www.javascriptcn.com code example
// webpack.config.js

module.exports = {
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@api': path.resolve(__dirname, 'src/api'),
      '@utils': path.resolve(__dirname, 'src/utils'),
      '@assets': path.resolve(__dirname, 'src/assets')
    }
  }
};

这样，我们在代码中就可以愉快地使用别名啦：

// test.js

import Button from '@components/Button';
import api from '@api';
import util from '@utils/util';
import logo from '@assets/logo.png';

通过使用 alias，我们不仅可以方便地管理模块别名，还可以将目录结构映射出来使代码更加整洁，可读性更好。

resolve

resolve 配置可以帮助 webpack 找到打包文件时需要引用的模块。默认情况下，webpack 会从当前目录开始递归地查找，直到找到相应的模块。但是在实际开发中，我们经常需要引用一些外部模块、或者引用的文件后缀不同等情况，这时候需要使用 resolve 配置。

引用外部模块

在引用外部模块时，我们可以使用 resolve 配置指定 webpack 查找的目录，从而避免在每个文件中都写一遍相对路径。例如，我们在项目中引用了 jQuery 库，我们可以通过以下配置告诉 webpack 从 node_modules 目录中查找：

// webpack.config.js

module.exports = {
  // ...
  resolve: {
    modules: [path.resolve(__dirname, 'node_modules')]
  }
};

这样，我们可以直接在代码中使用 import $ from 'jquery'，省去了使用相对路径的麻烦。

引用文件后缀

默认情况下，webpack 只会查找 .js 后缀的文件，如果我们需要引用其他类型的文件，比如 .css 或者 .png 文件，就需要使用 resolve.extensions 配置。例如，我们将以下配置写入 webpack 配置文件中：

// webpack.config.js

module.exports = {
  // ...
  resolve: {
    extensions: ['.js', '.jsx', '.css', '.json', '.png', '.jpg']
  }
};

这样，在引用模块时，如果省略了后缀，webpack 会按照数组中的顺序自动添加后缀，并查找对应的文件：

// www.javascriptcn.com code example
// test.js

import styles from './styles.css';
import image from './logo.png';

function addImage() {
  const img = new Image();
  img.src = image;
  document.body.appendChild(img);
}

addImage();

配置别名

除了 alias 配置，我们还可以使用 resolve.alias 配置项来创建模块别名。与 alias 相比，resolve.alias 更加灵活，它可以接受相对路径、绝对路径和模块路径等多种形式。例如，我们可以通过以下方式将任意路径映射为一个模块路径：

// www.javascriptcn.com code example
// webpack.config.js

module.exports = {
  // ...
  resolve: {
    alias: {
      jquery: 'jquery/dist/jquery.min.js',
      projectRoot: path.resolve(__dirname, '../')
    }
  }
};

然后就可以愉快地引用了：

import $ from 'jquery';
import * as configuration from 'projectRoot/config/config';

结语

通过以上的介绍，相信大家对 webpack 的 alias 和 resolve 配置有了更加深入的了解。通过灵活配置，我们可以简化模块依赖、提高开发效率，同时提升项目的可读性和整洁度。仔细阅读并理解以上知识点，相信能够对大家的前端开发工作有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cfc6dee46428fe9ebbd588

说说 webpack 的 alias 和 resolve 配置

alias

resolve

引用外部模块

引用文件后缀

配置别名

结语

接着读