Resolve

设置模块如何被解析,为webpack 提供合理的默认值

在此就介绍一些常用的解析api

alias

设置别名，确保模块引入变得简单

const path = require('path');
module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/'),
    },
  },
};

// 之前
import Utility from '../../utilities/utility';
// 现在
import Utility from 'Utilities/utility';

extensions

尝试按顺序解析这些后缀名。如果有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。

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

能够使用户在引入模块时不带扩展：

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

请注意，以上这样使用 resolve.extensions 会 覆盖默认数组，这就意味着 webpack 将不再尝试使用默认扩展来解析模块。然而你可以使用 ‘…’ 访问默认拓展名：

module.exports = {
  //...
  resolve: {
    extensions: ['.ts', '...'],
  },
};

mainFiles

当遇到文件夹的时候向下再解析一级

module.exports = {
  //...
  resolve: {
    mainFiles: ['index'],
  },
};

// fileDir 是文件夹
// 之前
import File from '../path/to/fileDir';
// 之后
import File from '../path/to/fileDir/index';

modules

告诉 webpack 解析模块时应该搜索的目录。
绝对路径和相对路径都能使用，但是要知道它们之间有一点差异。
通过查看当前目录以及祖先路径（即 ./node_modules, ../node_modules 等等）， 相对路径将类似于 Node 查找 ‘node_modules’ 的方式进行查找。
使用绝对路径，将只在给定目录中搜索。

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

如果你想要添加一个目录到模块搜索目录，此目录优先于 node_modules/ 搜索：

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