webpack配置aliases、项目使用、编译器支持

vue项目中使用webpack

在写vue项目的时候，我们可能想要定义'@'，'src'，'common'去定位到文件夹，方便我们在组件中引入组件，工具方法，我们就会在webpack配置文件中这样配置 ：

// webpack.config.dev.js / vue-cli配置webpack vue.config.vue
resolve: {
    extensions: ['.js', '.json'],
    alias: {
      '@': path.join(__dirname,'src'),
      'components': path.join(__dirname,'src/components'),
      'common': path.join(__dirname,'src/common'),
    }
}

这样配置，重启项目之后，想要引入模块比较方便啦

<script>
// import { set, get } from './../../common/config' // 之前的写法
import { set, get } from 'common/config' // 现在的写法
// import BaseInput from '../components/Base/BaseInput.vue' // 之前的写法
import BaseInput from 'components/BaseInput.vue' // 现在的写法
export default{
    components:{
        BaseInput
    }
}
</script>

这样写很舒服，但是当我们想要在组件内跳转到引入的某个东西，有时候按住ctrl键点击（比如上面的set、components/BaseInput.vue）是无法跳转的，这个时候就用到了vscode一个关于webpack aliases的配置。

Using webpack aliases

在vscode安装它，然后在项目根目录创建一个jsconfig.json，配置来自vscode官网有一个配置项Using webpack aliases

{
  "compilerOptions": {
    "target": "es2017",
    "allowSyntheticDefaultImports": false,
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

现在可以试试按住ctrl键点击（上面的set、components/BaseInput.vue），已经可以成功跳转了。

Node Modules Resolve

如果这里不行的话，需要在vscode安装一下Node Modules Resolve这个插件。

end

但是我觉得还是有点麻烦的，有其他的能让vscode支持这种的，请大家提出来，谢谢观看。