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