成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

webpack4新特性介紹

NotFound / 3954人閱讀

摘要：當(dāng)下最流行的模塊打包器于年月日正式發(fā)布版本，代號(hào)。從官方的發(fā)布日志來看本次大版本更新帶來了很多新特性更新和改善，這將會(huì)讓的配置更加簡(jiǎn)單。本文，筆者將會(huì)全面介紹的新特性及實(shí)踐。只支持模塊，目前處于試驗(yàn)階段。

導(dǎo)語(yǔ): webpack是一個(gè)JS應(yīng)用打包器, 它將應(yīng)用中的各個(gè)模塊打成一個(gè)或者多個(gè)bundle文件。借助loaders和plugins，它可以改變、壓縮和優(yōu)化各種各樣的文件。它的輸入是不同的資源，比如：js、css、圖片、字體和html文件等等，然后將它們輸出成瀏覽器可以正常解析的文件。

當(dāng)下最流行的模塊打包器 webpack 于2018年2月25日正式發(fā)布v4.0.0版本，代號(hào)legato。從官方的 發(fā)布日志 來看, 本次大版本更新帶來了很多新特性更新和改善，這將會(huì)讓webpack的配置更加簡(jiǎn)單。本文，筆者將會(huì)全面介紹webpack4的新特性及實(shí)踐。

環(huán)境支持

在發(fā)布日志里的 Big changes 板塊，官方宣布不在支持Node 4, Node 6 使用的是v8 5.0版本，支持93%的ES6語(yǔ)法。不難看出，這個(gè)決定是為了更好的利用ES6語(yǔ)法的優(yōu)勢(shì)，來編寫出更加整潔和健壯的代碼。

備注：當(dāng)使用webpack4時(shí)，確保使用 Node.js的版本 >= 8.9.4。因?yàn)閣ebpack4使用了很多JS新的語(yǔ)法，它們?cè)谛掳姹镜?v8 里經(jīng)過了優(yōu)化。
mode 屬性

另一個(gè)大的改變是webpack需要設(shè)置mode屬性，可以是 development 或 production。

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

通過mode, 你可以輕松設(shè)置打包環(huán)境。如果你將 mode 設(shè)置成 development，你將獲得最好的開發(fā)階段體驗(yàn)。這得益于webpack針對(duì)開發(fā)模式提供的特性：

瀏覽器調(diào)試工具

注釋、開發(fā)階段的詳細(xì)錯(cuò)誤日志和提示

快速和優(yōu)化的增量構(gòu)建機(jī)制

如果你將mode設(shè)置成了 production, webpack將會(huì)專注項(xiàng)目的部署，包括以下特性：

開啟所有的優(yōu)化代碼

更小的bundle大小

去除掉只在開發(fā)階段運(yùn)行的代碼

Scope hoisting和Tree-shaking

插件和優(yōu)化

webpack4刪除了CommonsChunkPlugin插件，它使用內(nèi)置API optimization.splitChunks 和 optimization.runtimeChunk ，這意味著webpack會(huì)默認(rèn)為你生成共享的代碼塊。其它插件變化如下:

NoEmitOnErrorsPlugin 廢棄，使用optimization.noEmitOnErrors替代，在生產(chǎn)環(huán)境中默認(rèn)開啟該插件。

ModuleConcatenationPlugin 廢棄，使用optimization.concatenateModules替代，在生產(chǎn)環(huán)境默認(rèn)開啟該插件。

NamedModulesPlugin 廢棄，使用optimization.namedModules替代，在生產(chǎn)環(huán)境默認(rèn)開啟。

uglifyjs-webpack-plugin升級(jí)到了v1.0版本, 默認(rèn)開啟緩存和并行功能。

開箱即用WebAssembly

WebAssembly(wasm)會(huì)帶來運(yùn)行時(shí)性能的大幅度提升，由于在社區(qū)的熱度，webpack4對(duì)它做了開箱即用的支持。你可以直接對(duì)本地的wasm模塊進(jìn)行import或者export操作，也可以通過編寫loaders來直接import C++、C或者Rust。

支持多種模塊類型

webpack4支持5種模塊類型：

javascript/auto: 在webpack3里，默認(rèn)開啟對(duì)所有模塊系統(tǒng)的支持，包括CommonJS、AMD、ESM。

javascript/esm: 只支持ESM這種靜態(tài)模塊。

javascript/dynamic: 只支持CommonJS和AMD這種動(dòng)態(tài)模塊。

json: 只支持JSON數(shù)據(jù)，可以通過require和import來使用。

webassembly/experimental: 只支持wasm模塊，目前處于試驗(yàn)階段。

0CJS

0CJS的含義是0配置，webpack4受Parcel打包工具啟發(fā)，盡可能的讓開發(fā)者運(yùn)行項(xiàng)目的成本變低。為了做到0配置，webpack4不再?gòu)?qiáng)制需要 webpack.config.js 作為打包的入口配置文件了，它默認(rèn)的入口為"./src/"和默認(rèn)出口"./dist"，這無疑對(duì)小項(xiàng)目而言是福音。

你所需要做的是在你的項(xiàng)目里包含 ./src/index.js 文件。當(dāng)在命令行里執(zhí)行 webpack 命令時(shí)，webpack會(huì)將該文件作為項(xiàng)目的入口文件進(jìn)行打包配置。

新的插件系統(tǒng)

webpack4對(duì)插件系統(tǒng)進(jìn)行了不少修改，提供了針對(duì)插件和鉤子的新API。變化如下：

所有的hook由 hooks 對(duì)象統(tǒng)一管理，它將所有的hook作為可擴(kuò)展的類屬性。

當(dāng)添加插件時(shí)，必須提供一個(gè)插件名稱。

開發(fā)插件時(shí)，可以選擇sync/callback/promise作為插件類型。

可以通過this.hooks = { myHook: new SyncHook(...) } 來注冊(cè)hook了。

更多關(guān)于新插件的工作原理可以參考: 新的插件系統(tǒng)是如何工作的？

Webpack5展望

已經(jīng)有不少關(guān)于webpack5的計(jì)劃正在進(jìn)行中了，包括以下：

對(duì)WebAssembly的支持更加穩(wěn)定

支持開發(fā)者自定義模塊類型

去除ExtractTextWebpackPlugig插件，支持開箱即用的CSS模塊類型

支持Html模塊類型

持久化緩存

最后

騰訊IVWEB團(tuán)隊(duì)的工程化解決方案feflow已經(jīng)開源：Github主頁(yè)：https://github.com/feflow/feflow

如果對(duì)您的團(tuán)隊(duì)或者項(xiàng)目有幫助，請(qǐng)給個(gè)Star支持一下哈～

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/93672.html

相關(guān)文章

  • 【Cute-Webpack】Webpack4 入門手冊(cè)（共 18 章）

    摘要：介紹背景最近和部門老大，一起在研究團(tuán)隊(duì)前端新手村的建設(shè)，目的在于幫助新人快速了解和融入公司團(tuán)隊(duì)，幫助零基礎(chǔ)新人學(xué)習(xí)和入門前端開發(fā)并且達(dá)到公司業(yè)務(wù)開發(fā)水平。 showImg(https://segmentfault.com/img/remote/1460000020063710?w=1300&h=646); 介紹 1. 背景 最近和部門老大，一起在研究團(tuán)隊(duì)【EFT - 前端新手村】的建設(shè)...

    AlanKeene 評(píng)論0 收藏0

  • webpack4配置詳解之逐行分析

    摘要：今天就嘗試著一起來聊聊吧，旨在幫大家加深理解新手更容易上路，都能從到搭建配置自定屬于自己的腳手架，或?qū)σ逊庋b好的腳手架有進(jìn)一步的鞏固，接下來蘇南會(huì)詳細(xì)講解中的每一個(gè)配置字段的作用部分為新增。 showImg(https://segmentfault.com/img/bVbjmMV?w=1008&h=298); 前言 　　經(jīng)常會(huì)有群友問起webpack、react、redux、甚至cre...

    dkzwm 評(píng)論0 收藏0

  • Vuex? 和 TypeScript 的 Webpack4.+ 嘗鮮

    摘要：靜態(tài)類型系統(tǒng)能幫助你有效防止許多潛在的運(yùn)行時(shí)錯(cuò)誤，而且隨著你的應(yīng)用日漸豐滿會(huì)更加顯著。選擇，會(huì)生成符合規(guī)范的文件，使用，會(huì)生成滿足規(guī)范的文件，使用會(huì)生成使用的的代碼。使用或者是會(huì)生產(chǎn)包含特性的代碼。 showImg(https://segmentfault.com/img/bVbbhsr?w=800&h=800); 靜態(tài)類型系統(tǒng)能幫助你有效防止許多潛在的運(yùn)行時(shí)錯(cuò)誤，而且隨著你的應(yīng)用日漸...

    Astrian 評(píng)論0 收藏0

  • webpack4.0初體驗(yàn)、各版本及parcel性能對(duì)比

    摘要：前段時(shí)間又發(fā)布了新版本我接觸的時(shí)候已經(jīng)版本了支持的版本必須打包速度大小比較以及粗淺的試了一下下圖所示，黃色為版本綠色為我寫的配置，跟基本相似，具體不同下面會(huì)介紹藍(lán)色是自帶的模式紅色為具體大小速度大家可以比較一下，還是很給力的關(guān)于配置方面，應(yīng) 前段時(shí)間webpack又發(fā)布了新版本webpack4我接觸的時(shí)候已經(jīng)4.1版本了node支持的版本必須node: >=6.11.5 webpack...

    MarvinZhang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<