# 分析路徑

# resolve.alias

創建別名，讓在引用 (import 或 require) 模塊時能更方便。

原來的 JavaScript 檔案中引入模塊需這樣使用：

import Utility from '../../utilities/utility';

在 webpack.config.js 中加入 resolve 的設定後：

// webpack.config.js
const path = require('path');

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

1
2
3
4
5
6
7
8
9
10
11
12

現在只需這樣做引入即可：

import Utility from 'Utilities/utility';

# resolve.modules

告訴 webpack 在找尋模塊時預先搜索哪些目錄。

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

1
2
3
4
5
6
7

如果要添加要搜索的目錄，該目錄優先於 node_modules：

// webpack.config.js
const path = require('path');

module.exports = {
  //...
  resolve: {
    modules: [
      path.resolve(__dirname, 'src'),
      path.resolve(__dirname, 'src/js'),
      'node_modules',
    ],
    // 可以省略副檔名
    extensions: ['.js'],
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// index.js

// 原來需這樣引入
// import Utility from './js/utility.js';
import Utility from 'utility';

1
2
3
4
5

← Babel 圖片處理 →