webpack 路径问题

发表于 | 分类于 |
字数统计: 301 字 | 阅读时长 ≈ 1 分钟

在分析 Vuex 源码的时候，为了方便调试，引入了本地的 Vuex 包，并更改 Webpack 配置的路径，其中有个 vuex$ vue$的路径配置挺有意思，为什么要配这个呢？

1
2
3
4
5
6
7
8
9
10
11
// 在 webpack.base.conf.js中
resolve: {
  extensions: [".js", ".vue", ".json"],
    alias: {
      vue$: "vue/dist/vue.esm.js",
        vuex$: resolve("src/vuex/index.esm.js"),
          vuex: resolve("src/vuex"),
            "@": resolve("src")
    }
},
  // 为啥？？

首先看vuex/src/index.js && index.esm.js这两个文件，可以看出index.ems.js只多了export对象

我们代码里是这样：import { mapState, mapGetters, mapActions } from "vuex";

就得使用index.esm.js，因为es6的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
// 第一组
export default function crc32() { // 输出
  // ...
}
 
import crc32 from 'crc32'; // 输入
 
// 第二组
export function crc32() { // 输出
  // ...
};
 
import {crc32} from 'crc32'; // 输入

所以要获取mapState等函数就要使用vuex$进行精准查找到index.ems.js文件。但是我们想要vuex文件夹的其他文件，就需要再定义vuex，才能找到，比如

1
2
import devtoolPlugin from "vuex/plugins/devtool.js";
console.log(devtoolPlugin);

所以需要配置 vuex$和vuex两个路径，当然，也可以在import Vuex form '相对路径'