資訊專欄INFORMATION COLUMN
摘要：通過各種和的相關配置，將復雜的文件和依賴包細化打包，使得無論是開發還是上線發布都大大節省了效率。所以我們將移入內。寫在最后這是自己第一次寫學習筆記，自知內容比較基礎還需要深入研究，算是自己對相關知識的梳理吧。
Webpack是什么？
"A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff. "
這是gayhub上對它的原文介紹，是不是只看懂了javascript、ES6、CSS、JSON？(開個玩笑:))
其實看下面這張圖就比較清晰了：
(圖片來源官網 鏈接描述)
總結以上，我個人的理解是：一切皆模塊。Webpack通過各種loader和plugin的相關配置，將復雜的文件和依賴包細化、打包，使得無論是開發還是上線發布都大大節省了效率。
在開發大型項目、應用時一般使用 Webpack，開發框架庫時一般使用 Rollup。
例如React、Vue都是使用Rollup作為構建工具，它的特點就是相比其他JavaScript打包工具，Rollup總能打出更小更快的包；
而Webpack則以功能全面取勝（例如：對代碼分割和靜態資源導入顯著優勢，熱更新HMR等等），并且在Version 2中加入了Tree Shaking功能(即刪除無用代碼)
使用過Webpack的猿(媛)們應該都了解過其比較繁瑣的配置文件，而Parcel則幾乎是零配置，只有少量的配置項通過命令行即給處理了，這對于追求簡易開發流程的工程師來說是很友好了。
例外Grunt和Gulp本人沒有了解過，大家感興趣的話可以自行查找一下相關資料文檔。
總之，拋開一切環境談工具都是耍流氓，技術并無好壞，只有適不適合。大家應該先明白自己需要實現的功能是什么，才能選擇好應該使用什么技術，切不可盲目跟風。
寫在前面：此次Webpack版本4.29.5，Webpack-cli版本3.2.3
①首先選擇新建項目的文件夾，打開命令行工具輸入"mkdir webpack-demo",然后"cd webpack-demo"
②"npm init -y"
③"npm install webpack webpack-cli --save-dev"
這是初始化Webpack的第一步，此時的目錄結構應該是這樣的:
接著在根目錄下新建webpack.config.js和dist文件夾，將index.html移入dist文件夾內
webpack.config.js是為了迎合項目的復雜配置需求，后面會介紹它的具體內容，總之是Webpack中非常重要的部分；
dist中的文件是作為"分發"文件，其中代碼就是我們最小化和優化后的代碼，在打包后會出現在瀏覽器中；而src中的文件是作為"源"文件，也就是我們開發編輯的代碼。所以我們將index.html移入dist內。
我們在webpack.config.js中寫入以下內容：
工程的自定義配置寫好了，下面來寫需要打包的文件./dist/index.html和./src/index.js
寫好之后還需要在終端中安裝一下lodash(這個工具庫真的挺好用的，感興趣的朋友可以了解一下)：npm install --save lodash
OK,萬事具備，只欠"npx webpack",我們在命令行中輸入一下，幾秒中之后它會輸出下面這些，表示打包成功了：
然后我們打開index.html會發現頁面上出現了"Hello webpack",而dist文件夾中也新增了main.js文件。恭喜你，一個極簡單的打包工程就算完成了！
可是這點知識是遠遠滿足不了我們日常工作的，下面介紹下個人認為使用Webpack必備姿勢。
①入口文件如果是一個即可以是上面的寫法，如果是多個則可以是下面這種：
比較推薦第二種key-value的形式，原因就是方便找到；
②出口文件中"[name]"既是entry的js名稱：
③Loader的介紹以處理css文件為例：
早期傳統引用css文件的方式一般都是利用link標簽，而隨著工程中頁面的模塊化、Sass和Less等預處理器語言的出現以及性能優化要求的提高，對css文件的加載方式也發生了變化，這就是利用Webpack的好處之一。
解釋下上面的截圖，"test"屬性利用正則表示式匹配文件后綴名；"use"里則是各loader，實際的加載順序和這里寫的順序是相反的，也就是從下往上執行。
接著我們新建css文件：
然后在index.js里import一下： import "./css/base.css"，
打開index.html就可以看到樣式的改變了。
如果你是less/sass文件，則需要修改下配置：
將"test"里的css換成less，然后重新命名下css文件，利用相關的語法：
index.js里的import也是需要修改的。最后你會發現頁面樣式跟著改變了。
這里需要補充的一點是，如果你的工程中同時存在css文件和less/sass文件，在配置loader時，就應該重新定義個對象，而不是緊跟css-loader來寫其相關配置項！
④Plugin的介紹：
Webpack中有兩種插件，一種是Webpack自帶的，一種是要通過npm包require的：
如圖，引入依賴后在plugin數組中配置相關內容（例子中UglifyJsPlugin則是Webpack自帶的)。
這篇文章比較詳細介紹了主要的幾種插件及其配置信息，大家感興趣的話可以看看鏈接描述
剛開始學習Webpack時，我對Plugin和Loader的概念有些混淆，其實簡單來說，Loader可以理解成文件的轉換器，而Plugin的是一種出現于整個打包生命周期的運行機制，是一種擴展功能。
前幾天看到一道面試題是問插件的實現原理是什么？自己也去查找了相關資料，個人理解如下：Webpack是一系列復雜工序，其中一個名為compiler的對象會作為參數調用插件實例的apply方法，
插件實例在獲取到compiler對象后，就可以通過compiler.plugin(事件名稱, 回調函數) 監聽到Webpack廣播出來的事件，進而改變相應的結果，實現其功能。
寫在最后：
這是自己第一次寫學習筆記，自知內容比較基礎還需要深入研究，算是自己對相關知識的梳理吧。有不對之處還望各位大佬不吝賜教！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/102315.html
摘要：我是，一個普普通通的程序員，我不是什么大牛也不是什么業務專家，我也將是時代拋棄的一員，但是我仍在茍且，希望大家能抵擋洪流，走向下一片蔚藍廣闊的天空。 個人博客地址：貓叔的博客 | MySelf 前言 之所以寫這篇文章其實辯論性很強，這里不是針對所有地區、所有的互聯網類型科技型公司，僅僅是我目前所處在大環境與場合是這樣的。公司地處東南方，算是大型國企的全資公司，不是私企性質，雖然不是私...
摘要：還有一點比較重要的是，如何在快速迭代的軟件開發周期內，去解放生產力。于是就會大量涌現很多優秀的開源框架和擴展庫，去解決現實生活中的實際問題。而這一切都是在朝著提高開發效率，降低維護成本而前進。結合書中的觀點去總結和思考。 關于 Vue.js showImg(https://segmentfault.com/img/bVbk73v?w=252&h=253); 簡單小巧的核心（代碼壓縮后大...
摘要：還有一點比較重要的是，如何在快速迭代的軟件開發周期內，去解放生產力。于是就會大量涌現很多優秀的開源框架和擴展庫，去解決現實生活中的實際問題。而這一切都是在朝著提高開發效率，降低維護成本而前進。結合書中的觀點去總結和思考。 關于 Vue.js showImg(https://segmentfault.com/img/bVbk73v?w=252&h=253); 簡單小巧的核心（代碼壓縮后大...
摘要：在慕課網看到有人提了這個問題，所以在這里說說自己的一些拙見。持之以恒，找到工作是水到渠成的事情。順便提一下，我曾在慕課網寫過的一篇文章你也是穿越過來的嗎這是我的網址本人經驗有限，歡迎多多指點哈。 版權聲明：此文首發于我的簡書賬號人生還有多少個二十年 ，轉載請注明出處。 在慕課網看到有人提了這個問題，所以在這里說說自己的一些拙見?！ ∥也凰氵^來人，本沒資格談論這個，不過我還是忍不住想...
閱讀 2380·2021-11-18 10:07
閱讀 2335·2021-09-22 15:59
閱讀 3092·2021-08-23 09:42
閱讀 2294·2019-08-30 15:44
閱讀 1205·2019-08-29 15:06
閱讀 2331·2019-08-29 13:27
閱讀 1226·2019-08-29 13:21
閱讀 1428·2019-08-29 13:13
