webpack配置別名alias

在webpack.config.js中，通過設置resolve屬性可以配置查找“commonJS／AMD模塊”的基路徑，也可以設置搜索的模塊后綴名，還可以設置別名alias。設置別名可以讓后續引用的地方減少路徑的復雜度。

一、常規webpack構建的項目

1、目錄結構

- src
   - utils
     - utils.js
   - config
     - config.js
   - main.js
- webpack.config.js

2、webpack.config.js

const path = require('path');
const resolve = dir => path.resolve(__dirname, dir);

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
        path: resolve('dist')
    },
    resolve: {
        // 設置別名
        alias: {
            '@': resolve('src')// 這樣配置后 @ 可以指向 src 目錄
        }
    }
};

3、config.js

import utils math from "@/utils/utils"; // 因為設置了alias，所以引入utils.js時候可以這樣簡寫
....

二、vue-cli 2.0 在\build\webpack.base.conf.js文件下配置

三、vue-cli 3.0 在vue.config.js下配置別名alias

// 由於 Vue CLI 3 不再使用傳統的 webpack 配置文件，故 WebStorm 無法識別別名 * 本文件對項目無任何作用，
// 僅作為 WebStorm 識別別名用 * 進入 WebStorm preferences -> Language & Framework -> JavaScript -> Webpack，選擇這個文件即可
const resolve = dir => require('path').join(__dirname, dir)
module.exports = {
  resolve: {
    alias: {
      '@': resolve('src'),
      '_c': resolve('src/components')
    }
  }
}