資訊專欄INFORMATION COLUMN
摘要：引言最近在學(xué)習(xí)，發(fā)現(xiàn)好多知識(shí)點(diǎn)，之前一點(diǎn)都沒有接觸過，如等等。使用本地安裝，會(huì)存于文件夾內(nèi)與屬性內(nèi)，更方便項(xiàng)目文件遷移以及協(xié)同開發(fā)等情況。
引言
最近在學(xué)習(xí)webpack，發(fā)現(xiàn)好多知識(shí)點(diǎn)，之前一點(diǎn)都沒有接觸過，如babel、core-js、browserslist等等。以前習(xí)慣了使用cli構(gòu)建項(xiàng)目，很多東西不用考慮，拿來就用，這樣的碼農(nóng)是不會(huì)有能力提升的，必須了解更多的知識(shí)點(diǎn)，才能成為一位出色的前端工程師。
我大致梳理了一下我的學(xué)習(xí)歷程，將它簡(jiǎn)單的歸類，以解決問題的路徑娓娓道來。當(dāng)然我的學(xué)習(xí)也不算完整，還在繼續(xù)努力，也請(qǐng)各位大佬多多指導(dǎo)。
學(xué)習(xí)webpack首先必須擁有的基礎(chǔ)是：
1.了解node.js是什么；
2.了解npm包管理器是什么以及package.json的常用屬性的意義；
在此基礎(chǔ)上，我們來一步步的學(xué)習(xí)webpack，以及如何使用webpack進(jìn)行打包。
webpack 簡(jiǎn)介webapck是一款前端資源打包工具，其最核心的功能是解決模塊之間的依賴問題。聽起來是不是很耳熟？對(duì)，沒錯(cuò)，如果你學(xué)習(xí)過AMD規(guī)范、CommonJS規(guī)范，你會(huì)發(fā)現(xiàn)webpack是在這些規(guī)范的基礎(chǔ)上發(fā)展出來的開源工具，解決前端開發(fā)人員模塊化到工程化的問題。（PS:沒有了解過AMD、CommonJS的小伙伴建議去簡(jiǎn)單了解一下，因?yàn)檫@是js模塊化的基礎(chǔ)，了解該基礎(chǔ)才能理解前端模塊化，而進(jìn)一步理解前端工程化，才能明白webpack到底在干什么。）
這里簡(jiǎn)單說一下js模塊化。很多小伙伴從切圖仔進(jìn)階到前后端分離的前端工程模式時(shí)，都有些犯怵，一下子不理解前端工程到底是個(gè)什么概念，其實(shí)前端工程化說白了，就是在開發(fā)中大型web應(yīng)用時(shí)，頁面的交互非常頻繁，很多計(jì)算、數(shù)據(jù)處理、業(yè)務(wù)代碼都放在客戶端（瀏覽器）進(jìn)行處理了。那這么多的代碼，怎么進(jìn)行管理和維護(hù)呢，難道還是按照不同的頁面
首先我們選擇菜單-安裝
出于學(xué)習(xí)的目的，大家可以選擇全局安裝。而如果出于項(xiàng)目制作的考慮，以及可能會(huì)用到Git進(jìn)行版本控制和分享，我推薦大家進(jìn)行本地安裝。使用本地安裝，webpack會(huì)存于node_modules文件夾內(nèi)與devDependencies屬性內(nèi)，更方便項(xiàng)目文件遷移以及協(xié)同開發(fā)等情況。
使用webpack需要安裝3個(gè)包，分別是
1.webpack（核心包）
2.webpack-cli（腳手架）
3.webpack-dev-server（開發(fā)服務(wù)器）
webpack核心包，顧名思義，是基礎(chǔ)，必須使用的包。
webpack-cli腳手架，是可以幫助我們?cè)谑褂脀ebpack的時(shí)候，減少一些需要手動(dòng)配置的選項(xiàng)，更方便我們使用自定義配置的工具，從wepback v4.0開始必須安裝
webpack-dev-server是我們?cè)陂_發(fā)環(huán)境時(shí)，不可能每一次調(diào)試都重新構(gòu)建一次。所以一個(gè)熱重載的服務(wù)器就很有必要。
使用npm命令：
npm install --save-dev webpack webpack-cli webpack-dev-server
好的，安裝成功。
未完待續(xù)...文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106460.html
摘要：前言在上一篇文章中我介紹了學(xué)習(xí)前的準(zhǔn)備工作，下面開始的學(xué)習(xí)。目標(biāo)一般我們接觸到的關(guān)于的文章，都是以解讀官方文檔為主，而且是針對(duì)單頁面項(xiàng)目的應(yīng)用。我先在假設(shè)要做一個(gè)多頁面應(yīng)用，該如何去通過打包。 前言 在上一篇文章中我介紹了學(xué)習(xí)webpack前的準(zhǔn)備工作，下面開始webpack的學(xué)習(xí)。 *創(chuàng)建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpac...
摘要：前言在上一篇文章中我介紹了學(xué)習(xí)前的準(zhǔn)備工作，下面開始的學(xué)習(xí)。目標(biāo)一般我們接觸到的關(guān)于的文章，都是以解讀官方文檔為主，而且是針對(duì)單頁面項(xiàng)目的應(yīng)用。我先在假設(shè)要做一個(gè)多頁面應(yīng)用，該如何去通過打包。 前言 在上一篇文章中我介紹了學(xué)習(xí)webpack前的準(zhǔn)備工作，下面開始webpack的學(xué)習(xí)。 *創(chuàng)建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpac...
摘要：運(yùn)行該語句會(huì)執(zhí)行如下步驟使用進(jìn)行文件壓縮。設(shè)置環(huán)境變量，觸發(fā)某些包，以不同的方式進(jìn)行編譯。在原始的源碼中執(zhí)行查找和替換操作。等同于表示任何出現(xiàn)的地方都會(huì)被替換為。提供函數(shù)用來合并配置對(duì)象當(dāng)文件小于限制，會(huì)返回。 選項(xiàng) 1.devtool：通過在瀏覽器調(diào)試工具(browser devtools)中添加元信息(meta info)增強(qiáng)調(diào)試。 2.resolve.alias:創(chuàng)建 impor...
摘要：例如現(xiàn)在的入門學(xué)習(xí)手記系列。收到粉絲留言和打賞的喜悅。安裝上一篇入門學(xué)習(xí)手記一，主要是介紹了的核心概念，是整個(gè)學(xué)習(xí)過程的基礎(chǔ)知識(shí)。新生成的類似如下入門學(xué)習(xí)手記因?yàn)樯傻膬?nèi)容過多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公眾號(hào)：前端修煉之路，歡迎關(guān)注。 最近開始想要維護(hù)一個(gè)個(gè)人的公眾...
閱讀 2083·2021-09-22 15:54
閱讀 1844·2021-09-04 16:40
閱讀 869·2019-08-30 15:56
閱讀 2632·2019-08-30 15:44
閱讀 2159·2019-08-30 13:52
閱讀 1132·2019-08-29 16:35
閱讀 3352·2019-08-29 16:31
閱讀 2571·2019-08-29 13:48
