国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端webpack workflow（一）——Webpack入門

DevWiki / 1250人閱讀

摘要：開發(fā)這樣一款加載器最大原因，就是為了代碼分離以及靜態(tài)資源模塊化無縫接合。異步方式，將依賴分割成多個節(jié)點，然后每個節(jié)點形成一個新的文件塊。會處理最常見的模塊標準和。通過聲明依賴，可以選擇一個本地的版本，而不需要使用全局聲明的版本。

作者：Jogis
原文鏈接：https://github.com/yesvods/Blog/issues/2
轉(zhuǎn)載請注明原文鏈接以及作者信息

模塊加載器

隨著前端項目越來越復(fù)雜（尤其是大型SPA），以及命名空間混亂，一系列模塊加載器隨之而生。

Javascript模塊標準有：AMD 和 CommonJS

最有名的加載器有：RequireJS、SeaJS、Bowserify

那么，有人就會問，這么多模塊加載器，為什么還要重復(fù)發(fā)明輪子？

童鞋們騷安勿燥，下面為大家娓娓道來 Webpack的特性以及使用入門。

Webpack

為什么需要另外一款模塊加載器？

現(xiàn)有的模塊加載器，不能很好適配大型項目（大型單頁面應(yīng)用程序）開發(fā)。開發(fā)這樣一款加載器最大原因，就是為了代碼分離以及靜態(tài)資源模塊化無縫接合。

盡管嘗試去拓展現(xiàn)有的模塊加載器，但最后發(fā)現(xiàn)不可能完成所有功能目標。

開發(fā)這一款加載器的目標

分離現(xiàn)有依賴樹，按需加載

高效保證第一次加載

靜態(tài)資源模塊化

第三方庫模塊化加載

實現(xiàn)加載器幾乎所有環(huán)節(jié)可配置性

適配大項目開發(fā)

Webpack特性功能？ 代碼分離

Webpack有兩種依賴聲明方式：同步與異步。異步方式，將依賴分割成多個節(jié)點，然后每個節(jié)點形成一個新的文件塊。經(jīng)過優(yōu)化后的文件塊樹，會以一個個文件形式分發(fā)出去（僅僅打包成一個大文件形式是很低效的，詳見）。

加載器插件

原生的Webpack只能處理JS文件，使用加載器插件，可以將其他資源專為JS資源。通過這種方式來加載，每一種資源都可以被Webpack看作是一個模塊來加載。

智能模塊解析

Webpack內(nèi)置一個智能加載模塊，可以用于處理幾乎所有的第三方庫。它甚至可以解析依賴聲明的表達式，比如 require("./templates" + name + ".jade")。Webpack會處理最常見的JS模塊標準：CommonJS 和 AMD。

插件系統(tǒng)

Webpack的最大特點，就是配套了非常豐富的插件系統(tǒng)。大部分內(nèi)置特性功能都是基于這套插件系統(tǒng)。它可以讓你根據(jù)需要自定義Webpack，將一般插件作為開源項目發(fā)布出去。

Webpack安裝 通過NPM包管理器 
npm install -g webpack

項目中初始化Webpack

最優(yōu)的方式就是，在項目中聲明Webpack依賴。通過聲明依賴，可以選擇一個本地的Webpack版本，而不需要使用全局聲明的版本。

添加一個npm 配置文件package.json：

npm init

然后需要回答一系列問題。如果希望把自己項目發(fā)布到npm上面，這些問題的回答非常重要。（如果不需要的話，一直回車就好啦）

安裝webpack、添加依賴到package.json

npm install webpack --save-dev

其中--save-dev就是聲明在開發(fā)階段需要用到webpack，并且自動把webpack依賴寫到package.json配置文件上面，生產(chǎn)環(huán)境就不需要安裝（上生產(chǎn)環(huán)境時候，webpack已經(jīng)把項目打包好啦，不需要它老人家出馬了^_^）

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/86174.html

相關(guān)文章

  • 前端webpack workflow（一）——Webpack入門

    摘要：開發(fā)這樣一款加載器最大原因，就是為了代碼分離以及靜態(tài)資源模塊化無縫接合。異步方式，將依賴分割成多個節(jié)點，然后每個節(jié)點形成一個新的文件塊。會處理最常見的模塊標準和。通過聲明依賴，可以選擇一個本地的版本，而不需要使用全局聲明的版本。 作者：Jogis 原文鏈接：https://github.com/yesvods/Blog/issues/2 轉(zhuǎn)載請注明原文鏈接以及作者信息 模塊加載器...

    khs1994 評論0 收藏0

  • 前端webpack workflow（一）——Webpack入門

    摘要：開發(fā)這樣一款加載器最大原因，就是為了代碼分離以及靜態(tài)資源模塊化無縫接合。異步方式，將依賴分割成多個節(jié)點，然后每個節(jié)點形成一個新的文件塊。會處理最常見的模塊標準和。通過聲明依賴，可以選擇一個本地的版本，而不需要使用全局聲明的版本。 作者：Jogis 原文鏈接：https://github.com/yesvods/Blog/issues/2 轉(zhuǎn)載請注明原文鏈接以及作者信息 模塊加載器...

    hiYoHoo 評論0 收藏0

  • 前端webpack workflow（二）——Webpack基本使用

    摘要：還可以用作文件加載使用，詳細請看。實用命令除了簡單運行，還可以添加幾個參數(shù)，方便部署文件處理。以上僅僅介紹了前端開發(fā)最基本的用法，更多參數(shù)以及功能使用，參考官網(wǎng) 作者：Jogis原文鏈接：https://github.com/yesvods/Blog/issues/3轉(zhuǎn)載請注明原文鏈接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

    roadtogeek 評論0 收藏0

  • 前端webpack workflow（二）——Webpack基本使用

    摘要：還可以用作文件加載使用，詳細請看。實用命令除了簡單運行，還可以添加幾個參數(shù)，方便部署文件處理。以上僅僅介紹了前端開發(fā)最基本的用法，更多參數(shù)以及功能使用，參考官網(wǎng) 作者：Jogis原文鏈接：https://github.com/yesvods/Blog/issues/3轉(zhuǎn)載請注明原文鏈接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

    LeexMuller 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<