webpack4.0初體驗、各版本及parcel性能對比

04-07

原寫於2018-03-08

前段時間webpack又發布了新版本webpack4

我接觸的時候已經4.1版本了

node支持的版本必須"node": ">=6.11.5"

webpack打包速度大小比較以及parcel

粗淺的試了一下

下圖所示，黃色為webpack3版本；綠色為我寫的配置，跟webpack3基本相似，具體不同下面會介紹；藍色是webpack4自帶的production模式；紅色為parcel；

具體大小速度大家可以比較一下，還是很給力的

關於配置方面，webpack4應該說最大的噱頭就是零配置了

webpack4簡單介紹

安裝

首先在安裝上，我們照往常一樣

npm i webpack

這裡需要注意一點，webpack4需要安裝webpack cli，跟往常不一樣，大家安裝好webpack4以後並不能直接使用，會提示你安裝webpack cli

運行

第一步安裝完之後，我們就可以直接實驗了

這是我的文件目錄，其中webpack.config.js不需要，這是我後面實驗用的，寫上自己的js就可以運行了

webpack4默認配置，入口文件默認src/index.js，輸出默認dist/main.js

下面是我的配置文件，我測試速度寫的，webpack4有默認配置

var path = require(path)var webpack = require(webpack)module.exports = { entry: path.resolve(, ./src/index.js), output: { path: path.resolve(, ./dist), filename: [name].js, },//出口 optimization: { minimize: true }, mode: none,}

UglifyJs的相關配置變化

壓縮插件寫法已經不一樣了，換成了

optimization: { minimize: true },//原先的寫法，現在會報錯，具體看下圖plugins: [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }),//代碼壓縮，開發環境慎用 ]

新增的mode欄位，默認模式配置

另外，大家看到了，裡面有個mode：node，這個是設置模式的

production為默認生產模式，development為生產模式，另外有一個隱藏的none模式，node模式就是不使用默認的，採用我們所配置的

這裡有個細節，那就是，當我們設置了pro、dev模式的時候，我們寫的配置會被忽略，採用默認的，所以自己配置必須寫none模式

自己寫配置的話，如果不寫node欄位，並且沒有設置壓縮，會警告，代碼過大讓你拆分