webpack快速入門——webpack3.X 快速上手一個Demo
阿新 • • 發佈：2017-11-29
目錄 pre head -c 文字 get cal 瀏覽器 size
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.X 快速上手一個Demo