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