webpack中resolve.alias的使用

8,251 阅读1分钟

在项目中我们会使用一些公共的组件或者方法,但是如果项目层级比较深并且组件比较多的话,写起来就比较麻烦.

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…