vue-cli中 'vue$'配置的别名问题

Question

在脚手架当中我们总能看到 'vue$'配置了别名'vue/dist/vue.esm.js'alias: {  'vue$': 'vue/dist/vue.esm.js',  '@': resolve('src')}module: {rules: [   ...(config.dev.useEslint ? [createLintingRule()] : []),   {    test: /\.vue$/,    loader: 'vue-loader',    options: vueLoaderConfig   }]}但是我们实际引用vue的时候都是 import Vue from 'vue'并没有走这个别名而vue的npm包中的package.json 中 "main": "dist/vue.runtime.common.js", 默认是走vue.runtime.common.js所以问题来了 alias 中的 'vue$': 'vue/dist/vue.esm.js', 作用是什么呢？？？

Answer 1

resolve-alias
这个是 webpack.rosolve.alias 的文档， vue$后面的 $代表精确匹配

运行时 + 编译器 vs. 只包含运行时
这个 vue 文档， 是为什么要写 'vue$': 'vue/dist/vue.esm.js'，需要完整的含 编译器 的 vue 版本时才写

Answer 2

但是我们实际引用vue的时候都是 import Vue from 'vue'并没有走这个别名

这个只要配置 alias, webpack 在寻找依赖的时候会判断 是否别名，肯定会走 vue$ 的

module.rules的test: /\.vue$/,这个 $ 是正则的 $，跟 alias 的 $ 不是一回事