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