4.0的發佈，讓構建速度提升98%，包體積更小，配置，壓縮，更現代化。具體請看https://doc.webpack-china.org/guides/migrating/#-loader

第一步 新增依賴

先安裝webpack-cli (用來啟動webpack)

pagejson

第二步升級包

以下是主要的依賴包的變動，具體請根據項目情況升級

pagejson

第三步修改配置

mode是 webpack 4 中新增加的參數選項，其有兩個可選值：production和development。mode不可缺省，需要二選一第三步修改配置

production模式：

1. 默認提供所有可能的優化，如代碼壓縮/作用域提升等

2. 不支持watching

3. process.env.NODE_ENV的值不需要再定義，默認是production

pagejson

development模式：

1. 主要優化了增量構建速度和開發體驗

2. process.env.NODE_ENV的值不需要再定義，默認是development

3. 開發模式下支持註釋和提示，並且支持 eval 下的 source maps

pagejson

4.0變動的配置：

• NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors (生產模式默認)

• ModuleConcatenationPlugin -> optimization.concatenateModules （生產模式默認）

• NamedModulesPlugin -> optimization.namedModules （開發模式默認）。

• 刪除了 CommonsChunkPlugin，取而代之的是optimization.splitChunks和optimization.runtimeChunk，這提供了細粒度的緩存策略控制

移除的功能

• 移除了module.loaders

• 移除了loaderContext.options

• 移除了Compilation.notCacheable

• 移除了NoErrorsPlugin

• 移除了Dependency.isEqualResource

• 移除了NewWatchingPlugin

• 移除了CommonsChunkPlugin

以上配置只要完成，就能跑起來，錯誤日誌，基本都是依賴包不支持webpack4.0等錯誤，一個一個改。

坑點：

因為某些依賴包的不更新支持4.0，會導致無法使用的包有：

1.html-webpack-plugin還沒有更新，會出現compilation.templatesPlugin is not a function的錯誤，目前需要npm i webpack-contrib/html-webpack-plugin -D安裝，官方說法是因為作者這段時間沒空更新，所以他們自己fork了一份改了，現在先用這種方式用著，等作者有空了再合併進去。

2.url-loader 暫時無法使用，可以用file-loader 完全替代，只是不可用url-loader的轉化為base64的功能

3.sass-resources-loader 暫時無更新，無法使用sass的全局變量。具體到每個文件必須用@import ‘...’

文 / Mob 高煬

ShareSDK 輕鬆實現社會化功能，以其強大的 App 社交分享功能深受開發者熟知和好評；

SMSSDK 可快速集成短信驗證功能，幫助開發者打通手機通訊錄好友的社交圈；

MobLink 打破了 App 孤島，實現了 Web 與 App 的無縫鏈接，新用戶在首次打開 App 時，大大提高用戶轉化率；

Mob統計分析 用數據驅動產品，精準化行為分析 + 多維數據模型 + 匹配全網標籤 + 垂直行業分析顧問；

MobPush 快速集成推送服務，應對多樣化推送場景；

BBSSDK 是 Discuz 論壇移動化解決方案，同步 Discuz 論壇數據實現論壇移動化；

ShareREC 手遊錄像分享則是 ShareSDK 圖文分享的延伸，可為手遊實現邊玩邊錄的功能，以此提升玩家黏度並有效促進推廣；

MobAPI 為開發者提供各種所需的原始數據及穩定的 API SERVICE,也免去了自己收集數據的繁瑣步驟；

MobPay 多種主流支付渠道可一鍵接入，滿足企業多樣化需求；

ShopSDK 2小時快速搭建您的商城系統，商品管理 - 訂單交易 - 售後退款 - 整套解決方案，豐富您APP的應用場景；

MobIM 為開發者提供即時通訊的消息通道服務，專注於保障通訊的安全穩定可靠，支持開發者使用App的自有用戶系統，或第三方用戶系統；

截止 2017 年 12 月，Mob 開發者服務平臺全球設備覆蓋超過 76 億，SDK下載量超過 318

閱讀更多 Mob開發者服務平臺 的文章

關鍵字: Discuz! 技術 HTML