jetbrains: webstorm如何识别webpack中的@等alias符号

webstorm为我们提供了 webpack.config.js来帮助我们寻找文件位置。

webpack配置文件

随着项目越来越大，新的vue-cli3出来之后，已经很少再去暴露配置了，甚至于无法解析。此时有一些项目特立独行的配置文件让我觉得可以学习一下。

配置webstorm.config.js

webpack 的alias选项

webpack配置alias.png

分析过程

1. webpack.config.js 原来是帮助webstorm来优化配置的，但是webstorm无法应对千奇百怪的架构变化，
2. 分析实质其实就是利用了webpack.config.js中的 module.exports语法来分析alias路径，从而帮助我们解析文件。
3. 所以我们只需要写一个JS文件和webpack.config.js相似，同时也module.export相同的参数即可。

重写配置（有的项目叫做webstorm.config.js)

'use strict'
const path = require('path')

function resolve (dir) {
  return path.join(__dirname, '.', dir)
}

module.exports = {
    context: path.resolve(__dirname, './'),
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': resolve('src'),
            '@views': resolve('src/views'),
            '@comp': resolve('src/components'),
            '@core': resolve('src/core'),
            '@utils': resolve('src/utils')
        }
    },
}