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

前段時間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字段，而且沒有設置壓縮，會警告，代碼過大讓你拆分

---

多餘的話

新手第一次寫文章，喜歡或者對你有用麻煩點一下贊收藏~
若有不對歡迎各位指點~
我也是最近網上沒看到太多文章才本身試了一下
具體的跟之前版本不一樣的內容你們能夠去gayhub項目裏面看，官方有介紹

---

本文只要介紹本身粗淺的實驗~後期有更多接觸我會更新的~