由於初次接觸 webpack（官網
），對很多方面都不是很理解，在查詢部分資料後記錄一下自己的見解（本文實踐基於webpack4）。
1. 個人見解
2. 安裝webpack
2.1 所需環境
安裝webpack，首先需要電腦中已經安裝了node，npm，這一步就不說了。
2.2 安裝步驟
webpack安裝方式有 全域性安裝 和 區域性安裝 ，兩種方式都需要安裝一遍。安裝較慢的可以使用**映象cnpm。
並且 webpack4 在安裝時需要同時安裝兩個東西：webpack
，webpack-cli
（腳手架）。以下是安裝方法：
2.2.1全域性安裝：
npm install webpack webpack-cli -g2.2.2區域性安裝：首先需要在專案（資料夾）根目錄生成package.json 配置檔案，cmd進入根目錄，執行（所有選項回車確定即可）：
npm init然後安裝webpack：
npm install webpack webpack-cli -s成功安裝後的資料夾目錄如下，有專案依賴包以及配置檔案：
到這裡，我們的安裝已經完成了。
3. 簡單使用
在預設配置中，webpack只會去打包js，入口檔案（entry）為：src/index.js，出口檔案（output）為：dist/mian.js 。我們就使用預設配置來嘗試一下。
3.1 新建index.js：
3.2 執行打包命令
直接在根目錄執行命令
webpack這個時候會看到已經打包成功，根目錄下出現dist（目標資料夾）裡面的main.js就是打包好的檔案：
但是會出現警告
這是因為webpack打包有兩種模式，一種是開發模式：development，另一種是生產模式：production。
開發模式下打包的**是格式化的，可以方便除錯；生產模式下則是壓縮過的。
在 沒有配置 的情況下，它會用生產模式進行打包，但是會報警告。我們可以在使用 cli命令 的時候，將引數帶過去（也可以選擇直接在 配置檔案 中去設定）：
webpack --mode=production這樣就不會報警告了。
3.3 測試
我們直接建乙個html檔案，然後引入這個生成的js，開啟後，可以看到控制台輸出的 「hello webpack」 了。
4. 總結
，不同版本之間各種方法也不一樣。初步使用之後感覺還是挺好的，對於大的專案來說，webpack打包的確是省事不少。後續慢慢學，還會慢慢記錄的~
修正乙個錯誤：官網其實是有詳細的介紹的，是自己沒看到
Webpack學習筆記
自我總結 如其名，一些入口處的引導檔案 定義 output 位於物件最頂級鍵 key 包括了一組選項，指示 webpack 如何去輸出 以及在 輸出你的 bundle asset 和其他你所打包或使用 webpack 載入的任何內容 自我總結 這個也沒什麼說的，如其名，定義了最終生成檔案的位址以及其...
webpack 學習筆記
學習資源來自前端工程化 webpack.html 課程專題 使用webpack搭建生產環境工作流.html 這兩個教程必須同時看著，互相補充。impot和 export是es6新語法，需要用babel轉一下，直接執行不了 配置webpack.config.js時候，需要引入path模組。1 例 co...
webpack學習筆記
babel loader 它是使babel與webpack協同工作的模組 babel core 顧名思義，它是babel編譯器的核心模組 babel preset env 它是babel官方推薦的預置器，可根據使用者設定的目標環境自動新增所需的外掛程式和補丁來編譯es6 babel loader支援...