1.進入根目錄,建兩個文件夾，分別為src和dist
1).src文件夾：用來存放我們編寫的javascript代碼，可以簡單的理解為用JavaScript編寫的模塊。
2).dist文件夾：用來存放供瀏覽器讀取的文件，這個是webpack打包成的文件。
2.在dist下建立一個index.html文件，寫入以下代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>hzh webpack</title> </head> <body> <div id="title"></div> <script src="./bundle.js"></script> </body> </html>
這里引入的bundle.js 可以先不管，這個文件現在還沒有，這是用webpack打包后生成的文件
src下建一個entry.js文件 寫入代碼：
document.getElementById('title').innerHTML='Hello Webpack';
3.在命令行中執行：webpack src/entry.js dist/bundle.js
這樣就打包成功了，如果要看效果，可cnpm install -g live-server，執行live-server，瀏覽器會自動打開一個窗口，點擊dist文件夾可查看到Hello webpack 文字
最終效果圖：
前端必學內容：webpack（模塊打包器）
webpack3 學習內容，點擊即可到達
(1).webpack快速入門——如何安裝webpack及注意事項
(2).webpack快速入門——webpack3.X 快速上手一個Demo
(3).webpack快速入門——配置文件：入口和出口，多入口、多出口配置
(4).webpack快速入門——配置文件：服務和熱更新
(5).webpack快速入門——CSS文件打包
(6).webpack快速入門——配置JS壓縮，打包
(7).webpack快速入門——插件配置：HTML文件的發布
(8).webpack快速入門——CSS中的圖片處理
(9).webpack快速入門——CSS分離與圖片路徑處理
(10).webpack快速入門——處理HTML中的圖片
(11).webpack快速入門——CSS進階，Less文件的打包和分離
(12).webpack快速入門——CSS進階：SASS文件的打包和分離
(13).webpack快速入門——CSS進階：自動處理CSS3前綴
(14).webpack快速入門——CSS進階：消除未使用的CSS
(15).webpack快速入門——給webpack增加babel支持
(16).webpack快速入門——打包后如何調試
(17).webpack快速入門——實戰技巧：開發和生產並行設置
(18).webpack快速入門——實戰技巧：webpack模塊化配置
(19).webpack快速入門——實戰技巧：優雅打包第三方類庫
(20).webpack快速入門——實戰技巧：watch的正確使用方法，webpack自動打包
(21).webpack快速入門——實戰技巧：webpack優化黑技能
(22).webpack快速入門——集中拷貝靜態資源
(23).webpack快速入門——Json配置文件使用
如果我的內容對你有幫助，歡迎打賞
