webpack基礎

在這裏我僅僅的是對webpack作個講解，webpack這個工具很是強大，解決了咱們前端很繁瑣的一些工具流程繁瑣的事情。若是感興趣的同窗，簡易仍是看官網吧。

中文連接地址：https://www.webpackjs.com/

爲何要使用webpack？

現今的不少網頁其實能夠看作是功能豐富的應用，它們擁有着複雜的JavaScript代碼和一大堆依賴包。爲了簡化開發的複雜度，前端社區涌現出了不少好的實踐方法

• 模塊化，讓咱們能夠把複雜的程序細化爲小的文件;
• 相似於TypeScript這種在JavaScript基礎上拓展的開發語言：使咱們可以實現目前版本的JavaScript不能直接使用的特性，而且以後還能轉換爲JavaScript文件使瀏覽器能夠識別；
• Scss，less等CSS預處理器
• ...

這些改進確實大大的提升了咱們的開發效率，可是利用它們開發的文件每每須要進行額外的處理才能讓瀏覽器識別,而手動處理又是很是繁瑣的，這就爲WebPack類的工具的出現提供了需求。

什麼是webpack

WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。

 

官網的一張圖，你是否能看明白呢？

中間那個是webpack的圖標，能夠看做webpack這個工具。左邊是咱們項目生產環境下因此來的包，經過這個webpack工具咱們能夠打包全部的圖片，因此的腳本，全部的樣式等等，最後打包成了右邊的靜態資源文件。

注意了：每一個webpack的版本都有不一樣的功能，並且高版本的webpack可能會出現意想不到的bug，在這裏推薦你們使用2版本的webpack。

另外webpack還支持咱們的模塊化加載。在以前的學習可沒有這個功能哦！這讓咱們更加快速的開發。