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 版本时才写

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

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

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