webpack 划重点

1,502 阅读2分钟

背景

最近开始有精力比较细致的研究 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应该不太行。