webpack4.x的變化（二）

我以前寫過一篇文章webpack4帶來了什麼，這篇文章優勢照貓畫虎的意思，文章中說明了一些什麼，但好像是尚未說透，感受不是那麼好，因此下定決心，在寫一篇，可能這一篇也有不足，但後續還會繼續補充。話很少說，下面進入正文。

webpack4.x提出的一個口號是實現0配置，也就是說，咱們不用添加配置文件webpack.config.js，就能夠實現構建打包的目的。由於，webpack4.x以前的版本，由於要實現構建就須要本身手動來添加配置文件，不論是大型應用，仍是小應用，這一點增長了使用的複雜度，同時也讓學習曲線變得更加陡峭。因此webpack4.x的出現就像一道清流，受人追捧，但同時也帶來了一些問題，最主要的就是遷移和使用習慣的變化。

webpack4.x的mode選項和optimization插件

webpack4.x以前，咱們須要本身配置mode（mode有三個選項值，development、production和none），而後針對性的配置相應的配置文件。webpack4.x中的mode的出現，可讓咱們沒有省去一些沒必要要的配置（如何要實現精細化的控制，仍是須要自定義配置文件）。很明顯，webpack4.x讓咱們省去了一些配置，那麼爲了更好的使用webpack4.x，便於之後的擴展，或者實現細粒度的控制，你就須要瞭解不一樣的mode。

mode: development

也就是以前，咱們要本身配置的開發模式，省去了webpack.config.dev.js配置文件。

新特性：

• 方便於瀏覽器調試的工具；
• 能夠快速的對增長的內容進行編譯；
• 提供了更精確、更有用的運行時錯誤提示機制

功能：

• 不用設置npm腳本命令中 webpack --env development ，webapck會自動將 development 傳遞給 process.env.NODE_ENV 。固然，這裏咱們使用的時mode選項，咱們能夠在npm腳本命令爲 "dev": "webpack --mode development" ，也能夠命令行中輸入 webpack --mode development（注意：windows安裝webapck-cli注意路徑問題）；
• 它啓用了 NamedChunksPlugin 和 NamedModulesPlugin 兩個插件。這兩個插件時webapck的內置插件，在 webpack lib目錄 下能夠找到。它的做用就是給全部的模塊（源文件）和塊（構建輸出文件）定義一個名字。

注：在webpack中，若是要使用webpack的內置插件，須要const webapck = require('webpack') 這樣先引入webapck，而後像 webapck.HotModuleReplacementPlugin() 這樣，啓用啓用內置的熱替換插件。而webapck內置插件中有一類優化插件會常常用到，咱們能夠 webpack.optimize.uglifyjsplugin()(這個插件在webapck4.x中移除了)。

mode: production

也就是以前，咱們要本身配置的開發模式，省去了webpack.config.pro.js配置文件。

新特性：

• 自動壓縮構建輸出的文件
• 快速的運行時處理
• 不暴露源代碼和源文件的路徑
• 快速的靜態資源輸出

功能：

• 不用設置npm腳本命令中 webpack --env production ，webapck會自動將 production 傳遞給 process.env.NODE_ENV 。固然，這裏咱們使用的時mode選項，咱們能夠在npm腳本命令爲 "dev": "webpack --mode production" ，也能夠命令行中輸入 webpack --mode production。
• 它啓用了 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin,它們是內置插件，還啓用了 TerserPlugin 這個插件（它不是webapck內置插件）。

優化類的插件：

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的特色就是：上手簡單，構建速度快，良好的開發體驗。

webpack4.x的devtool

它主要使用在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的新特性和新功能，使它造成了新的loader和plugin生態系統。

loader

webpack4.x移除了 this.options ，這個在loader中常用的上下文，若是要使用this.options.context，如今能夠經過this.rootContext。

this.hot 被添加到了loader的上下文中，因此咱們能夠給指定的代碼啓動HMR功能。

一樣如今能夠將AST傳遞給loader，而不會出現原來的雙重解析問題。

plugin

webpack4.x的插件生態系統變化較大，有興趣的可參考tapable。

參考資料

• webpack 官方文檔
• webpack 4: mode and optimization
• webpack 4: migration guide for plugins/loaders