我之前寫過一篇文章webpack4帶來了什么，這篇文章優(yōu)點(diǎn)照貓畫虎的意思，文章中說明了一些什么，但好像是還沒有說透，感覺不是那么好，所以下定決心，在寫一篇，可能這一篇也有不足，但后續(xù)還會(huì)繼續(xù)補(bǔ)充。話不多說，下面進(jìn)入正文。
webpack4.x提出的一個(gè)口號(hào)是實(shí)現(xiàn)0配置，也就是說，我們不用添加配置文件webpack.config.js，就可以實(shí)現(xiàn)構(gòu)建打包的目的。因?yàn)椋瑆ebpack4.x之前的版本，因?yàn)橐獙?shí)現(xiàn)構(gòu)建就需要自己手動(dòng)來添加配置文件，不管是大型應(yīng)用，還是小應(yīng)用，這一點(diǎn)增加了使用的復(fù)雜度，同時(shí)也讓學(xué)習(xí)曲線變得更加陡峭。所以webpack4.x的出現(xiàn)就像一道清流，受人追捧，但同時(shí)也帶來了一些問題，最主要的就是遷移和使用習(xí)慣的變化。
webpack4.x的mode選項(xiàng)和optimization插件
webpack4.x之前，我們需要自己配置mode（mode有三個(gè)選項(xiàng)值，development、production和none），然后針對(duì)性的配置相應(yīng)的配置文件。webpack4.x中的mode的出現(xiàn)，可以讓我們沒有省去一些不必要的配置（如何要實(shí)現(xiàn)精細(xì)化的控制，還是需要自定義配置文件）。很明顯，webpack4.x讓我們省去了一些配置，那么為了更好的使用webpack4.x，便于以后的擴(kuò)展，或者實(shí)現(xiàn)細(xì)粒度的控制，你就需要了解不同的mode。
mode: development
也就是之前，我們要自己配置的開發(fā)模式，省去了webpack.config.dev.js配置文件。
新特性：
- 方便于瀏覽器調(diào)試的工具；
- 可以快速的對(duì)增加的內(nèi)容進(jìn)行編譯；
- 提供了更精確、更有用的運(yùn)行時(shí)錯(cuò)誤提示機(jī)制
功能：
- 不用設(shè)置npm腳本命令中
webpack --env development，webapck會(huì)自動(dòng)將development傳遞給process.env.NODE_ENV。當(dāng)然，這里我們使用的時(shí)mode選項(xiàng)，我們可以在npm腳本命令為"dev": "webpack --mode development"，也可以命令行中輸入webpack --mode development（注意：windows安裝webapck-cli注意路徑問題）； - 它啟用了
NamedChunksPlugin和NamedModulesPlugin兩個(gè)插件。這兩個(gè)插件時(shí)webapck的內(nèi)置插件，在webpack lib目錄下可以找到。它的作用就是給所有的模塊（源文件）和塊（構(gòu)建輸出文件）定義一個(gè)名字。
注：在webpack中，如果要使用webpack的內(nèi)置插件，需要const webapck = require('webpack') 這樣先引入webapck，然后像 webapck.HotModuleReplacementPlugin() 這樣，啟用啟用內(nèi)置的熱替換插件。而webapck內(nèi)置插件中有一類優(yōu)化插件會(huì)經(jīng)常用到，我們可以 webpack.optimize.uglifyjsplugin()(這個(gè)插件在webapck4.x中移除了)。
mode: production
也就是之前，我們要自己配置的開發(fā)模式，省去了webpack.config.pro.js配置文件。
新特性：
- 自動(dòng)壓縮構(gòu)建輸出的文件
- 快速的運(yùn)行時(shí)處理
- 不暴露源代碼和源文件的路徑
- 快速的靜態(tài)資源輸出
功能：
- 不用設(shè)置npm腳本命令中
webpack --env production，webapck會(huì)自動(dòng)將production傳遞給process.env.NODE_ENV。當(dāng)然，這里我們使用的時(shí)mode選項(xiàng)，我們可以在npm腳本命令為"dev": "webpack --mode production"，也可以命令行中輸入webpack --mode production。 - 它啟用了
FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin,它們是內(nèi)置插件，還啟用了TerserPlugin這個(gè)插件（它不是webapck內(nèi)置插件）。
優(yōu)化類的插件：
FlagIncludedChunksPlugin: 檢測并標(biāo)記模塊之間的從屬關(guān)系。
ModuleConcatenationPlugin: 可以讓webpack根據(jù)模塊間的關(guān)系依賴圖中，將所有的模塊連接成一個(gè)模塊。
SideEffectsFlagPlugin: 告訴webapck去清除一個(gè)大的模塊文件中的未使用的代碼，這個(gè)大的文件模塊可以是自定義的，也可以是第三方的（注意：一定要`package.json`文件中添加`"sideEffects": false`）。
OccurrenceOrderPlugin: 告訴webapck各個(gè)模塊間的先后順序，這樣可以實(shí)現(xiàn)最優(yōu)的構(gòu)建輸出。
TerserPlugin: 它替代了uglifyjs-webpack-plugin插件。它的作用依然是對(duì)構(gòu)建輸出的代碼進(jìn)行壓縮。
mode: none
這種模式下，webpack不做任何優(yōu)化處理（相較于development和production模式）。webapck4.x所有內(nèi)置的優(yōu)化插件。
優(yōu)化類的內(nèi)置插件有哪些呢？你可以參考 webpack 的optmize目錄
從上面的描述可以看出，webapck4.x的特點(diǎn)就是：上手簡單，構(gòu)建速度快，良好的開發(fā)體驗(yàn)。
webpack4.x的devtool
它主要使用在development模式下，但也可以作用于production模式下。
development:
默認(rèn)的配置值是eval，它的速度快，但效果不好，也可以考慮使用 cheap-eval-source-map 或 cheap-module-eval-source-map。
production:
可以使用source-map或者cheap-source-map
webpack4.x的loader和plugin
由于webpack4.x的新特性和新功能，使它形成了新的loader和plugin生態(tài)系統(tǒng)。
loader
webpack4.x移除了 this.options ，這個(gè)在loader中經(jīng)常使用的上下文，如果要使用this.options.context，現(xiàn)在可以通過this.rootContext。
this.hot 被添加到了loader的上下文中，所以我們可以給指定的代碼啟動(dòng)HMR功能。
同樣現(xiàn)在可以將AST傳遞給loader，而不會(huì)出現(xiàn)原來的雙重解析問題。
plugin
webpack4.x的插件生態(tài)系統(tǒng)變化較大，有興趣的可參考tapable。
