极简webpack插件：彻底解决vscode点击无法跳转问题

在实际开发过程中，经常会用到webpack的别名，来缩短我们在项目中的各种相对路径的引入，方便开发也方便阅读。

但是vscode在不做配置的情况下，本身并不能识别别名，故无法自动跳转，一定程度上降低了使用的便捷性。要解决也很简单，在项目根目录下建立jsconfig.json，配置baseUrl和path即可，但是也还是会有一些问题其他的细节问题，配置起来也比较机械化，在需要配置多个alias时，会显得有些重复化。

作为一个技术打工人，当然是不允许重复化、机械化的操作产生，一切能够通过工具解决的事情绝不手动解决。打工人，不在重复中爆发，就在机械化操作中衰落。

image.png

alias-jsconfig-webpack-plugin，通过在webpack中增加插件，根据alias自动生成jsconfig.json（也可以选择tsconfig.json）。用法也非常简单，跟常规的webpack插件一样：

// install
// npm i --save-dev alias-jsconfig-webpack-plugin
const Alias = require('alias-jsconfig-webpack-plugin');
 
// ...plugins
export default {
    // your other config
    // ...
    plugins: [
        // your other plugins
        new Alias({
            language: 'js', // or 'ts'
            jsx: true, // default to true,
            indentation: 4, // default to 4, the indentation of jsconfig.json file
        }),
    ]
}

源代码也非常简单，不过80行，核心思路就是读取webpack配置中的alias，判断jsconfig.json文件，如果不存在则按照默认配置新建并将alias注入，存在则对比替换并新增path配置。从而完成jsconfig.json根据alias自动配置。代码在这里。

最后，欢迎试用，欢迎issues。

npm包链接：https://www.npmjs.com/package/alias-jsconfig-webpack-plugin