我之前寫過一篇文章webpack4帶來了什麼，這篇文章優點照貓畫虎的意思，文章中說明了一些什麼，但好像是還沒有說透，感覺不是那麼好，所以下定決心，在寫一篇，可能這一篇也有不足，但後續還會繼續補充。話不多說，下面進入正文。
webpack4.x提出的乙個口號是實現0配置，也就是說，我們不用新增配置檔案webpack.config.js，就可以實現構建打包的目的。因為，webpack4.x之前的版本，因為要實現構建就需要自己手動來新增配置檔案，不管是大型應用，還是小應用，這一點增加了使用的複雜度，同時也讓學習曲線變得更加陡峭。所以webpack4.x的出現就像一道清流，受人追捧，但同時也帶來了一些問題，最主要的就是遷移和使用習慣的變化。
webpack4.x之前，我們需要自己配置mode（mode有三個選項值，development、production和none），然後針對性的配置相應的配置檔案。webpack4.x中的mode的出現，可以讓我們沒有省去一些不必要的配置（如何要實現精細化的控制，還是需要自定義配置檔案）。很明顯，webpack4.x讓我們省去了一些配置，那麼為了更好的使用webpack4.x，便於以後的擴充套件，或者實現細粒度的控制，你就需要了解不同的mode。
mode: development也就是之前，我們要自己配置的開發模式，省去了
webpack.config.dev.js配置檔案。
新特性：
功能：注：在webpack中，如果要使用webpack的內建外掛程式，需要const webapck = require('webpack')這樣先引入webapck，然後像webapck.hotmodulereplacementplugin()這樣，啟用啟用內建的熱替換外掛程式。而webapck內建外掛程式中有一類優化外掛程式會經常用到，我們可以webpack.optimize.uglifyjsplugin()(這個外掛程式在webapck4.x中移除了)。
mode: production也就是之前，我們要自己配置的開發模式，省去了
webpack.config.pro.js配置檔案。
新特性：
功能：優化類的外掛程式：
flagincludedchunksplugin: 檢測並標記模組之間的從屬關係。
moduleconcatenationplugin: 可以讓webpack根據模組間的關係依賴圖中，將所有的模組連線成乙個模組。
sideeffectsflagplugin: 告訴webapck去清除乙個大的模組檔案中的未使用的**，這個大的檔案模組可以是自定義的，也可以是第三方的（注意：一定要`package.json`檔案中新增`"sideeffects": false`）。
occurrenceorderplugin: 告訴webapck各個模組間的先後順序，這樣可以實現最優的構建輸出。
terserplugin: 它替代了uglifyjs-webpack-plugin外掛程式。它的作用依然是對構建輸出的**進行壓縮。
mode: none這種模式下，webpack不做任何優化處理（相較於development和production模式）。webapck4.x所有內建的優化外掛程式。
優化類的內建外掛程式有哪些呢？你可以參考webpack 的optmize目錄
從上面的描述可以看出，webapck4.x的特點就是：上手簡單，構建速度快，良好的開發體驗。
它主要使用在development模式下，但也可以作用於production模式下。
development:
預設的配置值是eval，它的速度快，但效果不好，也可以考慮使用cheap-eval-source-map或cheap-module-eval-source-map。
production:
可以使用source-map或者cheap-source-map
由於webpack4.x的新特性和新功能，使它形成了新的loader和plugin生態系統。
webpack4.x移除了this.options，這個在loader中經常使用的上下文，如果要使用this.options.context，現在可以通過this.rootcontext。
this.hot被新增到了loader的上下文中，所以我們可以給指定的**啟動hmr功能。
同樣現在可以將ast傳遞給loader，而不會出現原來的雙重解析問題。
webpack4.x的外掛程式生態系統變化較大，有興趣的可參考tapable。
webpack 4 x安裝命令
執行npm i webpack g全域性安裝webpack，這樣就能在全域性使用webpack的命令 在專案根目錄中執行npm i webpack安裝到專案依賴中 執行npm init y初始化專案 建立專案基本的目錄結構src 和 dist,在src裡新建index.html 使用npm i jq...
webpack 4 X 基礎編譯
webpack4.x的打包已經不能用webpack 檔案a 檔案b的方式，而是直接執行webpack mode development或者webpack mode production，這樣便會預設進行打包，入口檔案是 src index.js 輸出路徑是 dist main.js 其中src目錄即...
webpack4 x學習筆記
有輸入必須有輸出，今天就來輸出一下學習webpack的過程。不得不先吐槽一下，比起可愛的grunt和好用的gulp，對webpack真心愛不起來！還有乙個血的教訓 千萬不要偷懶，有問題直接去官網。本文旨在記錄學習webpack的過車和遇到的問題，適合對node和webpack基礎知識有些了解的開發人...