背景

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

01.context問題

首先工程目錄是這樣的

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

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

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

查看 webpack 官方文檔，發現 entry 入口的路徑是相對于 context 配置的路徑的，也就是說，webpack 查找入口文件的時候，是從 context 規定的目錄開始查找的，并不是從根目錄開始。愛掏網 - it200.com

那么問題來了啊，我們這個配置文件壓根沒有配置 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/。愛掏網 - it200.com

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