webpack-第02節：讓你快速上手一個Demo
上節課已經安裝好了Webpack到電腦上，這節課就開始一個簡單的Demo，讓你快速上手和熟悉Webpack的基本用法，學習並作完這節課內容你就可以和朋友小吹一下說：我也會Webpack。
建立基本項目結構
首先進入上節課我們建立的webpack_demo目錄（每個人建立的位置不同，可能建立在了D盤或者E盤）。進入後在根目錄建立兩個文件夾，分別是src文件夾和dist文件夾：
- src文件夾：用來存放我們編寫的javascript代碼，可以簡單的理解為用JavaScript編寫的模塊。
- dist文件夾：用來存放供瀏覽器讀取的文件，這個是webpack打包成的文件。
你可以理解成src是源碼文件，dist是我們編譯打包好的文件；一個用於開發環境，一個用於生產環境。
編寫程序文件：
文件夾建立好後，我們在dist文件下手動建立一個index.html文件，並寫入下面的代碼。
/dist/index.html
| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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"> |
這裏引入了一個JavaScript的bundle.js文件。這個文件現在還沒有，這是用webpack執行打包命令後生產的文件。我們的index.html寫好後，接下來在src文件夾下建立entery.js的文件，用於編寫我們的JavaScript代碼，也是我們的入口文件。
src/entery.js
| 1 | document.getElementById(‘title‘).innerHTML=‘Hello Webpack‘; |
這個文件的代碼很簡單，就是在<div id=”title”></div>標簽裏寫入Hello Webpack這句話。
第一次Webpack打包
Webpack其實是可以在終端（命令行）中使用的，基本使用方法如下：
| 1 | webpack {entry file} {destination for bundled file} |
- {entry file}:入口文件的路徑，本文中就是src/entery.js的路徑；
- {destination for bundled file}:填寫打包後存放的路徑。
- 註意：在命令行中是不需要寫{ }的。
在我寫的例子中，終端執行命令如下：
| 1 | webpack src/entry.js dist/bundle.js |
執行的結果如下圖：
命令執行成功後，會在dist目錄下出現bundle.js文件，這時我們就可以在瀏覽器中預覽結果了，網頁中顯示出了Hello Webpack的信息。
npm install -g live-server 全局設置端口
sudo npm install -g live-server 上面安裝報錯 就用這個
如果安裝用 直接輸入 live-server 運行 這行瀏覽器出現生成好的路徑 然後點擊 dist 會出現 內容 ok
總結：
從這個Demo中你會了解到webpack的基本用法和使用過程，並會了命令行打包的方法。在這節文章的最後，我還是要強調，你一定要把本節內容在自己的電腦上敲一遍，這樣你才能深入了解。
webpack-第02節：讓你快速上手一個Demo