include (包括) 與 exclude (排除) 設定的目地

當透過 webpack 進行包檔案時，會直接尋找整個專案資料夾所有的內容，而裡面相關的檔案與資料夾很大包。
像是在尋找 .pug 檔時，主要的程式碼只會在 src/pug/ 的資料夾中，而 webpack 在尋找時是將整個專案資料夾包涵 node_modules 資料夾都尋找，在執行打包的過程中會花一些時間在找檔案，這樣的方式會使得效率上變差變慢。

include (包括) 與 exclude (排除) 優化 webpack 打包尋找來源檔

  • include：表示哪些目錄中的文件需要進行 loader 轉換
  • exclude：表示哪些目錄中的文件不需要進行 loader 轉換

Scss 設定 include (包括) 與 exclude (排除) 優化

在 sass|scss 的 loader 的地方加入 include (包括) 與 exclude (排除) 設定。

以上程式碼設定的部份， include 是直接指定 .scss 檔是在專案資料的 src/scss 中。
而 exclude 是直接針對 node_modules 針對資料夾進行排除。

透過上面的設定後，打包的時間點會縮減。

js 設定 include (包括) 與 exclude (排除) 優化

以 .js 來說，就不是排除 node_modules，當在進行轉換時不是只有 src/js/ 裡的部份，像是 vue.js 等相關其他 .js 檔的話，也會透過 bable 進行轉換，會在很多的資料夾中去找尋相關的關連內容，而 node_modules 也是如此，當在進行 import 模組時，自然不能排鄫 node_modules。

在設定中 include: path.resolve('.') 是針對根目錄下的所有資料夾，就是直接以 . 的部份表示。

針對 pug、css、jpe?g|png|gif、woff|woff2|ttf|eot 相關資料夾，以相同的既念進行設定

設定的部份如下

  • test: /\.(woff|woff2|ttf|eot)$/,：加入 include: path.resolve('src/assets'), exclude: path.resolve('./node_modules'),。
  • test: /\.(jpe?g|png|gif)$/,：加入 include: path.resolve('src/images'), exclude: path.resolve('./node_modules'),。
  • test: /\.css$/,：加入 include: path.resolve('src/css'), exclude: path.resolve('./node_modules'),。
  • test: /\.pug$/,：加入 include: path.resolve('src/pug'), exclude: path.resolve('./node_modules'),。

加入上面相關設定後，執行 npm run deploy 進行編譯的速度，體比在先前沒有設定 include 與 exclude 速度上快很多，最後見到終端機所回應的 Time: xxxxms 的差別。