一步步學Webpack4（0）實戰起步

最近由於學習需求，手擼了個簡單的spa框架並使用webpack4做打包和預覽除錯，由於沒有怎麼系統學習過webpack所以遇到坑挺多，索性直接開始從頭學一波順便記錄下來.

寫webpack文章不寫版本都是耍流氓，這篇文章基於當下最新的webpack v4.22.0以及webpack-cli v3.1.2編寫.

本章以環境搭建 -> 練習1 -> 理論學習 -> 練習2的步驟進行：

跟隨官方文件 getting-started，由簡單專案配置搭建開始；

完成後直接進入練習1--預設webpack配置打包專案；

完成一波實戰操作之後再回頭了解基本概念；

完成概念學習之後再進入練習2--學習使用配置檔案實現專案打包；

tip：全過程將記錄在github倉庫 webpack-stepbystep 中，邊看文章邊看commit學習食用效果更佳喲～

想要學習webpack的小夥伴大概都知道webpack是用來打包的，嗯暫時知道這些就足夠了，馬上來開始第一次打包的體驗吧～

開始實戰肯定要建立工程的，使用下面的命令開始(需要 node.js )：

mkdir webpack-stepbystep cd webpack-stepbystep npm init -y npm i -d webpack webpack-cli webpack -v

webpack-cli -v

上面的命令語句分別是：

本文的環境是webpack v4.22.0&webpack-cli v3.1.2, 最後兩句版本檢查如果執行失敗的話，可以考慮使用全域性方式安裝 webpack & webpack-cli, 之前在windows上開發的時候遇到過這個問題, 全域性安裝命令如下：

npm install -g webpack webpack-cli webpack -v

webpack-cli -v

其他安裝問題暫且按下不表, 可自行參考 installation.

完成以上專案環境搭建之後，專案的檔案結構大致如下所示：

webpack-stepbystep └─ node_modules └─ package-lock.json

└─ package.json

專案環境搭建至此全部完成, 以上環境搭建的專案提交為init(project): finish base enviroment setup, 馬上進入實戰環節.

首先新增index.html&src/index.js, 專案的檔案結構大致如下所示：

webpack-stepbystep └─ node_modules └─ src └─ index.js └─ index.html └─ package-lock.json

└─ package.json

編輯index.html, 其中用script引用了第三方工具庫 lodash:

function component ()

可以看出index.html中的兩個之間存在這隱式依賴的關係, 即index.js預設全域性存在lodash. 這種刀耕火種時期的寫法存在三個問題：

模組間的依賴關係不明顯，工程變大難以查詢依賴；

如果依賴丟失，將造成執行問題；

有錯就要改，所以我們開始使用現代方案來對當前專案進行修改～

至此專案提交為 feat(project): add index.html & index.js with implicit dependencies .

完美～webpack的打包操作現在已經完成了！只剩完成最後一步就可以完美執行程式了！

由於 webpack 的預設規則只能打包js，所以我們先用一下比較粗暴的手段，直接把index.html複製乙份，放到打包完生成的dist資料夾下. 在瀏覽器執行該index.html.

wow! 瀏覽器出現了 hello webpack的字樣，執行成功！webpack首戰成功結束～接下來來了解一下webpack的概念.

至此專案提交為 feat(project): combat：project bundle without configuration file .

concepts部分告訴了我們webpack的定義、目的以及核心概念：

輸出(ouput): 告訴webpack打包結果的建立位置&命名方式.

載入器(loader): loader的作用是將所有型別的檔案轉換為可以被 dependency graph 直接應用的檔案，也就是webpack封面圖--將所有依賴模組打包成靜態資源

外掛程式(plugin): 執行範圍更廣的任務，例如：優化打包、壓縮、注入新的環境變數等等.

模式(mode): 當前專案的打包模式，現有三種none、development、production模式可供選擇. 現在暫時不管這個屬性的配置.

webpack提供了方便開箱即用的預設配置，但是想要充分發揮webpack的能力，還是需要使用配置檔案.

如果webpack.config.js存在，則webpack命令將預設選擇使用它，於是我們在專案根目錄新增檔案webpack.config.js，專案的檔案結構大致如下所示：

webpack-stepbystep └─ dist └─ main.js └─ node_modules └─ src └─ index.js └─ index.html └─ package-lock.json └─ package.json

└─ webpack.config.js

為webpack.config.js新增配置，使之實現預設webpack配置的效果：

const path = require('path');
module.exports = 
};

刪除dist資料夾，儲存webpack.config.js,並開啟終端在當前專案下執行webpack，執行成功之後發現當前專案目錄再次生成了dist資料夾，裡面有main.js, 至此我們成功使用webpack.config.js成功復刻了預設webpack配置的效果～

當然這次實戰的目標肯定不止如此，第一次實戰中遺留著乙個問題，就是webpack的預設配置無法幫助我們將index.html一起打包到dist中，這導致專案無法全自動打包. 現在就來嘗試借助webpack.config.js來解放webpack的能力，實現專案的全自動化打包.

實現過程分為兩個步驟：

至此專案提交為 feat(project): combat: project bundle with webpack.config.js .

to be continued...

一步步學Webpack4（0）實戰起步

一步步學ROS

一步步學彙編（九）call ret

windows Thrift c 一步步搭建

一步步學Webpack4（0） 實戰起步

一步步學ROS

一步步學彙編（九）call ret

windows Thrift c 一步步搭建

相關推薦

一步步學Webpack4（0）實戰起步