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

MarvinZhang 發布于2019-08-22 15:11 / 2480人閱讀

摘要：前段時間又發布了新版本我接觸的時候已經版本了支持的版本必須打包速度大小比較以及粗淺的試了一下下圖所示，黃色為版本綠色為我寫的配置，跟基本相似，具體不同下面會介紹藍色是自帶的模式紅色為具體大小速度大家可以比較一下，還是很給力的關于配置方面，應

前段時間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項目里面看，官方有介紹

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

GPU云服務器云服務器初體驗各編程語言及領域各大云服務器對比 linux 各版本

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93243.html

前端每周清單第 45 期: Safari 支持 Service Worker, Parcel 完整教

摘要：的另一個核心特性，蘋果表示也正在開發中，按開發進度可能幾個月后就能與我們見面。是基于的本地化數據庫，支持以及瀏覽器環境。前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID: frontshow），及時獲取前端每周清單。本期是 2017 年的最后一...

趙春朋 2019-08-21 18:24 評論0 收藏0
2017 年崛起的 JS 項目

摘要：通過對比各項目過去個月在上新增數量，來評估其在年度的受關注程度，進而選出年度領域崛起的明星項目。也許正因為上述最后一點，在中國擁有大量的擁躉。不僅被中國最大的電商平臺阿里巴巴使用，也獲得了與這些公司青睞。共 4741 字，讀完需 8 分鐘，速讀 2 分鐘。我有幸參與了該項目的部分中文版翻譯、校對工作，感謝 Sacha Grief，Micheal Ramberu 的統計整理，以及 Fr...

gaara 2019-08-22 13:57 評論0 收藏0
淺談webpack4.0 性能優化

摘要：中在性能優化所做的努力，也大抵圍繞著這兩個大方向展開。因此，將依賴模塊從業務代碼中分離是性能優化重要的一環。大型庫是否可以通過定制功能的方式減少體積。這又違背了性能優化的基礎。接下來可以抓住一些細節做更細的優化。中，為默認啟動這一優化。前言：在現實項目中，我們可能很少需要從頭開始去配置一個webpack 項目，特別是webpack4.0發布以后，零配置啟動一個項目成為一種標配。正因為...

leanxi 2019-08-26 13:25 評論0 收藏0
如何優雅的升級到 webpack4

摘要：默認出入口在中，不再強制要求指定和路徑。構建模式提供了兩種構建模式可供選擇和選項描述會將的值設為。如果是，那就會開啟。默認只會對按需加載的代碼做分割。在或更低版本中，如果你想為一個推導出來的定制選項，你不得不在自己的選項中將它重復一遍。前言現在距離2018年2月15號webpack4.0.0出來已經有一段時間了，現在已經出了 @vue/cli 3.0，但是樓主還沒試過，聽說很強大，...

zhangfaliang 2019-08-22 18:36 評論0 收藏0