webpack学习--模块解析（https://webpack.js.org/concepts/module-resolution/）

Module Resolution

解析器是通过绝对路径来定位一个模块的类库，一个模块可以依赖另一个模块：

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

依赖的模块可以来自应用程序，或者第三方库。解析器帮助webpack找到require/import语句所需要打包的代码包。webpack利用enhance-resolve在打包模块的过程中解析文件路径。

webpack中的解析规则

用enhance-resolve，webpack可以解析3种类型的文件路径

绝对路径

import '/home/me/file';

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

因为我们已经有了绝对路径，所以，接下来不需要做什么了。

相对路径

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

在这种情况下，源文件的目录会被当作环境目录，相对路径加上环境路径，从而得到模块的绝对路径。

Module paths模块路径

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

webpack会在resolve.modules中指定的所有目录中查找需要的模块。利用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';

一旦路径按照上述规则被解析，解析器就会查看路径是否指向某个文件或者目录，如果路径指向一个文件，那么会有以下2种情况：

i）文件有拓展名，那么这个文件就会立即被打包

i）文件没有拓展名，那么这个文件就会按照resolve.extensions定义的文件拓展去解析，这个配置告诉解析器，什么类型的拓展文件名是合法的

如果这个路径指向一个文件夹，那么通过如下步骤来找到有正确拓展名的正确文件

i）如果文件夹包含package.json文件，按照resolve.mainFiles设置选项来确定范围，然后package.json中第一个符合条件的文件就是要打包的文件

ii）如果没有package.json文件，如果main fields没有返回一个合法的路径，会依次查找resolve.mainFiles中的选项，然后与import或者required文件夹做对比。

iii）文件类型也是用上述类似的方式利用resolve.extensions来确定

webpack提供了这些选项的默认值。

Resolving Loaders 

This follows the same rules as those specified for file resolution. But the resolveLoader configuration option can be used to have separate resolution rules for loaders.

Caching 

每一个文件路径都会被缓存，所以，加载同样的文件会更快，在观察模式下，只有变化的文件会从缓存中删除，如果观察模式关闭，那么每次编译会清除掉所有缓存。