之前在專案中其實，一直用的是vue-cli，並沒有關注過webpack的打包工具，vue腳手架其實已經內建webpack了，為什麼市場上還這麼多要求會webpack呢，那麼肯定是有優點可取的；

下面系統學習下webpack，一邊學習一邊記錄；

1. 建立配置檔案 webpack.config.js

配置檔案的名字叫webpack.config.js位於專案根目錄下

它的內容如下：

1. module.exports = {
2. entry: './src/app.js',
3. output: {
4. filename: './dist/app.bundle.js'
5. }
6. };

簡單解釋一下：entry表示原始檔，output

那怎麼用呢？

直接在終端上輸入webpack就可以了。webpack命令會去找webpack.config.js檔案，並讀取它的內容（原始檔和目標檔案），最後進行相應的處理。

如下所示：

當然，webpack.config.js的內容不止這麼簡單，可以更復雜些。

2. 改造 package.json 的 scripts 部分

package.json這個檔案，它主要放了一些專案的介紹資訊，除此之外，它還要一個重要的功能。

就是可以放一些常用的命令列指令碼，比如我們可以把我們經常要用的webpack命令放到這裡來。

我把它改了一下，變成類似下面這樣：

1. {
2. "name": "hello-wepback",
3. "version": "1.0.0",
4. "description": "",
5. "main": "index.js",
6. "scripts": {
7. "dev": "webpack -d --watch",
8. "prod": "webpack -p"
9. },
10. "author": "",
11. "license": "ISC",
12. "devDependencies": {
13. "webpack": "^3.8.1"
14. }
15. }

改動的內容主要是增加了下面幾行：

1. "scripts": {
2. "dev": "webpack -d --watch",
3. "prod": "webpack -p"
4. },

怎麼用呢？

很簡單，分別是

1. $ npm run dev

和

1. $ npm run prod

你會發現npm run dev和webpack -d --watch的效果是一樣的。

為什麼要用package.json的scripts功能呢？

我覺得主要有兩個原因吧：

第一：簡單維護，所有的命令都放一起了，也能方便地檢視

第二：別人下載了你的原始碼，一檢視package.json就能知道怎麼執行這個專案