# 3. 實現 hello world 現在我們要先把 webpack 用起來。 為了方便，我們先用 npm 創建一個空項目。 ## 1. 用 npm init 初始化項目 打開終端，運行如下命令: ``` # 隨便進一個目錄 $ cd ~/codes # 創建一個存放 webpack 項目的目錄，名為 hello-webpack $ mkdir hello-webpack $ npm init ``` 之后你會看到會提示你輸入一些內容，你不用管，直接全部回車： ``` name: (hello-wepback) version: (1.0.0) description: entry point: (index.js) test command: git repository: ``` 最后，你會發現 `hello-webpack` 目錄下多出了一個名為 `package.json` 的文件。 它的內容如下： ``` { "name": "hello-wepback", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } ``` 整個 json 文件的內容很簡單，主要是顯示這個項目的名稱、版本、作者、協議等信息，一看就能很清晰。 具體的信息這里我們先按下不表，以后我們會跟這個文件經常打交道的。 ## 2. 集成 webpack 現在項目是空的，沒有任何東西，我們現在需要把 webpack 集成進來，讓這個項目可以用這個 webpack。 我們在終端上輸入如下命令： ``` $ npm install --save-dev webpack ``` 你會看到正在安裝 webpack 的進度，稍等片刻，成功之后，我們再來看看 `package.json` 這個文件的內容。 ``` { "name": "hello-wepback", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^3.8.1" } } ``` 多了下面這幾行： ``` "devDependencies": { "webpack": "^3.8.1" } ``` 什么意思呢？就是說，我現在這個項目依賴于 webpack 這個工具，就算以后別人得到這個 `package.json` 文件，就會知道要安裝這個 webpack 了。 同時你也會發現，多了一個目錄，叫 `node_modules`，這個就是放剛才安裝的 webpack 這個庫的所有要用到的源碼文件。 這點先了解這么多，其實知道大概的意思就行。 ## 3. 創建 javascript 文件 現在項目創建了，webpack 也集成到項目中了，該是要把 webpack 玩起來的時候了。 首先創建一個目錄叫 `src`，然后在該目錄下創建 javascript 文件，叫 `app.js`。 這個文件的內容最簡單，就輸出 `hello world`，如下所示： ``` console.log('hello world'); ``` ## 4. 把 webpack 用起來 現在要把剛才的 js 文件用 webpack 編譯一下。 編譯后輸出的文件，我們放到一個目錄中，就叫 `dist` 好了。 先把這個目錄創建好。 現在的目錄結構是這樣的： ``` . ├── dist ├── node_modules ├── package.json └── src └── app.js ``` OK，現在開始轉化，在終端上輸入如下命令： ``` $ webpack ./src/app.js ./dist/app.bundle.js ``` 意思就是說，把 `./src/app.js` 作為源文件，把轉化后的結果放到 `./dist/app.bundle.js` 文件中。 下面是輸出的結果：  成功了！ 果然，在 `dist` 目錄下生成了 `app.bundle.js` 文件。 它的內容如下：  大約總共有 74 行，大小約是2.5 kb，可以看出多出了不少東西，但至少 `hello world` 那一行源碼被包含進來了。 具體的內容，你打開轉化后的文件看看就知道了。 ## 5 webpack 的其他用法 上面介紹的只是 webpack 一個最簡單的功能，它可不止有這個用法，還有其他的，我們來介紹一下。 ### 5.1 --watch 首先，在開發環境中，總是要一邊改，一邊看轉化效果吧，webpack 也能辦到，多加一個參數就好。 ``` $ webpack --watch ./src/app.js ./dist/app.bundle.js ``` 輸出效果：  現在去改改 `src/app.js` 文件的內容，試試效果，看看 `dist/app.bundle.js` 是否實時變化了。 ### 5.2 -p 之前轉化的 `app.bundle.js` 文件大約有 74 行代碼，差不多 2k 多的大小，好大啊，畢竟我們的代碼只有一行而已。 在生產環境，或線上，我們肯定不希望這么大的體積，畢竟體積越大，帶寬浪費就越多呀，下載也越慢。 如果要發布到線上環境，我們要把它壓縮一下的。 而 webpack 本來就有這樣的功能，也只是一個參數 `-p` ``` $ webpack -p ./src/app.js ./dist/app.bundle.js ``` 輸出如下：  可以看到，輸出的文件相比以前的 2.5 kb 小了一些，大約 505 個字節。 我們打開來看下：  好了，先說這么多吧。