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應該不太行。