webpack 模块解析

模块解析(module resolution)

查看原文|编辑此页

resolver 是一个库(library)，用于帮助找到模块的绝对路径。一个模块可以作为另一个模块的依赖模块，然后被后者引用，如下：

import foo from 'path/to/module';
// or
require('path/to/module');

绝对路劲类型: 

import '/home/me/file';

import 'C:\\Users\\me\\file';

相对路径类型: 

import '../src/file1';
import './file2';

模块路劲类型: 

import 'module';
import 'module/lib/file';

注意说明:

webpack resolve 配置模块如何解析

官方详细介绍 https://webpack.js.org/configuration/resolve/#resolve

默认搜索路劲读取当前文件的node_modules 

可在webpack.congif.js 下的resolve

配置alias别名

---

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';

配置modules别名 

---

告诉 webpack 解析模块时应该搜索的目录 

可以使用绝对路径和相对路径，但要注意它们的行为会略有不同。

node_modules通过查看当前目录及其祖先（即，和）./node_modules，类似于Node扫描的方式扫描相对路径../node_modules。

使用绝对路径，它只会在给定目录中搜​​索。

resolve.modules 默认为：

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

如果要添加要搜索的目录，该目录优先于node_modules/：

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