webpack3.x遷移升級

在webpack4.0中已經可以壓縮es6代碼，如：

class user {
 getUsername() {
 // to do
 }
}

壓縮之后為：

4. 移除loaders，必須使用rules

在webpack3.x中還保留之前版本的loaders，與rules并存都可以使用，在新版中完全移除了loaders，必須使用rules。

5. sideEffects

在模塊的package.js中添加sideEffects:false，當使用export單獨導出的時候，不會打包export之外的其他文件，使打包的文件更小。

相關鏈接：https://github.com/webpack/webpack/tree/master/examples/side-effects

6. webpack4支持多種形式的模塊類型，但是有時候可能需要加上type進行配合

如果是CommonJS, AMD, ESM三種類型的模塊，使用javascript/auto；

如果是EcmaScript modules(.mjs)，使用javascript/esm，其他的模塊類型將不生效；

如果只有CommonJS和EcmaScript modules不可用，使用javascript/dynamic；

如果是json類型的文件，允許使用require和import來導入json，使用json；

如果是Webassembly，使用webassembly/experimental —— 官方說是一個實驗性的功能。

舉個栗子：

rules: [
 {
 test: /\.json$/,
 type: "javascript/auto"
 }
]

7. 支持ES6的方式導入JSON文件，并且可以過濾無用的代碼

下面是三種導入json文件的方法：

let jsonData = require('./data.json');
import jsonData from './data.json'
import { first } from './data.json'

其中使用import { first } from './data.json'引入的json文件會忽略沒導入的代碼，打包時只會將first的打進去。

8. 移除CommonsChunkPlugin，用optimization.splitChunks和optimization.runtimeChunk來代替

這里內容有點多，不做具體介紹，后續可能會出一篇有關optimization.splitChunks的文章，在下面從3.x遷移的時候會有簡單介紹，出了上面的新版relesase鏈接外，下面還推薦幾個不錯的鏈接：

RIP CommonsChunkPlugin
medium上的有關移除CommonsChunkPlugin的文章
medium上的有關webpack4更新文章

二、webpack 3.X 遷移到 webpack4.X

1. 更新webpack依賴

npm install -g webpack webpack-cli
npm install --save-dev webpack webpack-cli

2. 更新對應模塊

在webpack升級的同時，對應的許多依賴也需要相應的進行升級，下面是在vuec-cli的腳手架中需要的更新；對于其他工程，注意看控制臺的報錯，是哪個插件報的錯就去升級那個插件，如果存在找不到模塊之類的錯誤就去升級對應的loader。

html-webpack-plugin => npm i -D html-webpacl-plugin

webpack-dev-server或者改為webpack-serve => npm i -D webpack-dev-server/npm i -D webpack-serve

vue-loader => npm i -D vue-loader

extract-text-webpack-plugin@next => npm i -D extract-text-webpack-plugin@next
…

3. 使用mode/–mode

在命令中加入--mode development/ --mode production或者在配置文件中加入mode: 'development'/mode: 'production'。

4. 如果使用CommonsChunkPlugin替換為optimization.splitChunks

使用栗子：

const webpack = require('webpack')；
new webpack.optimize.SplitChunksPlugin({
 chunks: "all",
 minSize: 30000,
 minChunks: 1,
 maxAsyncRequests: 5,
 maxInitialRequests: 3,
 name: true,
 cacheGroups: {
 default: {
 minChunks: 2,
 priority: -20,
 reuseExistingChunk: true,
 },
 vendors: {
 test: /[\\/]node_modules[\\/]/,
 priority: -10
 }
 }
})

寫在后面

對于webpack的這次升級這里沒有一一列舉，選了幾個相對關鍵的點，具體可以去看這里；有關從webpack3.x遷移到新版的時候可能還有其他的坑需要慢慢去趟，目前遇到的基本都解決了。

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

推薦閱讀：

vue+update()使用詳解

具體分析webpack樣式加載

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com