webpack之resolve模块解析

resolve官网配置地址
resolve官网概念地址

解析文件路径

1. 绝对路径：由于已经获得文件的绝对路径，因此不需要再做进一步解析。

2. 相对路径：在 import/require 中给定的相对路径，会拼接此上下文路径，来生成模块的绝对路径；

3. 模块路径：模块路径

4. 在 resolve.modules中指定的所有目录检索模块；它的默认值是 [‘node_modules’]，所以默认会从node_modules中查找文件；

5. 我们可以通过设置别名的方式来替换初识模块路径，具体后面讲解alias的配置；

配置alias

const path = require('path');

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

配置extensions

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

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