背景

最近開始有精力比較細(xì)致的研究 webpack，暫時(shí)沒有能力產(chǎn)出整篇的干貨，本文用于記錄在學(xué)習(xí)的過程中對(duì)于一些易混淆或者文檔不清晰的地方所做的一些研究性探索。愛掏網(wǎng) - it200.com如果錯(cuò)誤，請(qǐng)斧正。愛掏網(wǎng) - it200.com

01.context問題

首先工程目錄是這樣的

其中 webpack 配置文件中，入口文件路徑是這樣的，如下所示：

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

看到這里，自己感覺比較疑惑了，入口文件是相對(duì)路徑./examples/main,相對(duì)于當(dāng)前路徑查找，但是當(dāng)前路徑是build目錄啊，肯定不對(duì)，但是，運(yùn)行 webpack 打包命令的時(shí)候，又沒有報(bào)錯(cuò)，說明配置文件其實(shí)沒配置錯(cuò)誤，那到底是哪里有理解上的漏洞呢。愛掏網(wǎng) - it200.com。愛掏網(wǎng) - it200.com。愛掏網(wǎng) - it200.com

查看 webpack 官方文檔，發(fā)現(xiàn) entry 入口的路徑是相對(duì)于 context 配置的路徑的，也就是說，webpack 查找入口文件的時(shí)候，是從 context 規(guī)定的目錄開始查找的，并不是從根目錄開始。愛掏網(wǎng) - it200.com

那么問題來(lái)了啊，我們這個(gè)配置文件壓根沒有配置 context，那么必然取得是 context 的默認(rèn)配置，接著研究文檔，在官方文檔的說明里面說 context 的默認(rèn)目錄是當(dāng)前目錄，配置表里的默認(rèn)取值是這種：

  context: __dirname, // string（絕對(duì)路徑！）
  // webpack 的主目錄
  // entry 和 module.rules.loader 選項(xiàng)
  // 相對(duì)于此目錄解析

在這里有個(gè)問題，取值__dirname真的可以嗎，于是，在webpack配置文件里面加入了一行代碼 console.log(__dirname); 然后運(yùn)行 webpack --config webpack.dev.config.js，輸出結(jié)果為：/workspace/soyo/build,這樣肯定是不對(duì)的，相對(duì)于這個(gè)目錄肯定找不到入口文件，但是現(xiàn)在 webpack 運(yùn)行正常，說明context 的默認(rèn)取值肯定不是 ——dirname,正常的值應(yīng)該為 /workspace/soyo/。愛掏網(wǎng) - it200.com

然后開始找各種資料，發(fā)現(xiàn)對(duì) context 的講解真是乏善可陳，于是查找 node 文檔，查找能取值正確路徑的方法，發(fā)現(xiàn)了process.cwd()，這個(gè)方法取得是構(gòu)建命令運(yùn)行時(shí)的目錄的路徑，應(yīng)該跟 package.json同目錄，到這一步應(yīng)該就搞清楚了，但是webpack內(nèi)部解析的context 默認(rèn)值具體是不是這個(gè)，無(wú)從知曉，但是__dirname應(yīng)該不太行。愛掏網(wǎng) - it200.com