webpack中resolve.alias的使用

在項目中咱們會使用一些公共的組件或者方法，可是若是項目層級比較深而且組件比較多的話，寫起來就比較麻煩.

client
├── components   
│          └── layout                    
│          │     └── index.jsx         
│          │     └── inex.scss
│          └── header
│                └──index.jsx
│                └──index.scss
│            
├── utils
├── constants
├── pages
|      └── 2019                    
│           └── dome
|                ├── container
|                      └──home
|                          └──index.jsx
|                          └──index.scss
|-                  



複製代碼

好比我在配置resolve.alias以前我須要在home組件中引用components下了的header組件我須要這樣寫

import header from '../../../../components/header';
複製代碼

感受寫起來好痛苦啊,而且若是你想要將某個文件移動到不一樣的文件夾時，手動更改路徑就會更加痛苦。

咱們在webpack.config.js中

resolve: {
    extensions: [
      '.jsx', '.js',
      '.web.ts', '.web.tsx', '.web.js', '.web.jsx',
      '.ts', '.tsx',
      '.json',
    ],
    alias: {
      // 添加目錄便於引用
      '@components': path.resolve(__dirname, '../components'),
      '@utils': path.resolve(__dirname, '../utils'),
    },
  },
複製代碼

咱們就能夠這樣引用了,你根本不用擔憂路徑的問題。

import Layout from '@components/layout'
複製代碼

可是光這樣仍是不行，若是你的項目中引入eslint代碼檢測，eslint就會報路徑錯誤，這個時候就須要安裝一個插件：

npm install eslint-plugin-import eslint-import-resolver-alias --save-dev
複製代碼

而後在你的.eslintrc.js中增長以下代碼:

"settings": {
    "import/resolver": {
      "alias": {
        "map": [
          ["@components", path.resolve(__dirname, './components')],
          ["@utils", path.resolve(__dirname, './utils')]
        ]
      }
    }
  }
複製代碼

如今eslint 不報錯了，可是在VScode中使用ctrl+鼠標左鍵沒法識別別名路徑，這就給咱們調試代碼代碼了麻煩。

接下來咱們就要新建一個文件jsconfig.json讓編輯器能識別到咱們的別名.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["components/*"],
      "@utils/*":["utils/*"]
    }
  }
}
複製代碼

參考連接：

www.npmjs.com/package/esl… ，

webpack.docschina.org/configurati…