webpack配置別名alias

在webpack.config.js中，經過設置resolve屬性能夠配置查找「commonJS／AMD模塊」的基路徑，也能夠設置搜索的模塊後綴名，還能夠設置別名alias。設置別名能夠讓後續引用的地方減小路徑的複雜度。

1、常規webpack構建的項目

一、目錄結構

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

二、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 目錄
        }
    }
};

三、config.js

import utils math from "@/utils/utils"; // 由於設置了alias，因此引入utils.js時候能夠這樣簡寫
....

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

3、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')
    }
  }
}