webpack 划重点

背景

最近开始有精力比较细致的研究 webpack，暂时没有能力产出整篇的干货，本文用于记录在学习的过程当中对于一些易混淆或者文档不清晰的地方所作的一些研究性探索。若是错误，请斧正。

01.context问题

首先工程目录是这样的

其中 webpack 配置文件中，入口文件路径是这样的，以下所示：

devtool: 'eval-source-map',
// 入口
entry: {
  main: './examples/main',
  vendors: ['vue', 'vue-router']
},
复制代码

看到这里，本身感受比较疑惑了，入口文件是相对路径./examples/main,相对于当前路径查找，可是当前路径是build目录啊，确定不对，可是，运行 webpack 打包命令的时候，又没有报错，说明配置文件其实没配置错误，那究竟是哪里有理解上的漏洞呢。。。

查看 webpack 官方文档，发现 entry 入口的路径是相对于 context 配置的路径的，也就是说，webpack 查找入口文件的时候，是从 context 规定的目录开始查找的，并非从根目录开始。

那么问题来了啊，咱们这个配置文件压根没有配置 context，那么必然取得是 context 的默认配置，接着研究文档，在官方文档的说明里面说 context 的默认目录是当前目录，配置表里的默认取值是这种：

context: __dirname, // string（绝对路径！）
  // webpack 的主目录
  // entry 和 module.rules.loader 选项
  // 相对于此目录解析
复制代码

在这里有个问题，取值__dirname真的能够吗，因而，在webpack配置文件里面加入了一行代码 console.log(__dirname); 而后运行 webpack --config webpack.dev.config.js，输出结果为：/workspace/soyo/build,这样确定是不对的，相对于这个目录确定找不到入口文件，可是如今 webpack 运行正常，说明context 的默认取值确定不是 ——dirname,正常的值应该为 /workspace/soyo/。

而后开始找各类资料，发现对 context 的讲解真是乏善可陈，因而查找 node 文档，查找能取值正确路径的方法，发现了process.cwd()，这个方法取得是构建命令运行时的目录的路径，应该跟 package.json同目录，到这一步应该就搞清楚了，可是webpack内部解析的context 默认值具体是否是这个，无从知晓，可是__dirname应该不太行。