---
# System prepended metadata

title: webpack(3) webpack-dev-server，本地測試server
tags: [webpack]

---

---
tags: webpack,
disqus: hackmd
---

# webpack(3) webpack-dev-server，本地測試server

``` HTML=
npm install webpack-dev-server --save-dev
```
用來在本地端開啟loacl server

下面這些為基本設定，stats可依照個人喜好增減
``` HTML=
devServer: {
    compress: true,
    port: 3000,
    stats: {
        assets: true,
        cached: false,
        chunkModules: false,
        chunkOrigins: false,
        chunks: false,
        colors: true,
        hash: false,
        modules: false,
        reasons: false,
        source: false,
        version: false,
        warnings: false
    },
},
```
把這段貼在webpack.config.js如下圖
![](https://i.imgur.com/15M9nf0.png)

接著到package.json在他的"scripts"下新增一段
``` HTML=
//--open是用來動態更新你的localhost頁面，也就是說更新對檔案做修改的時候，
  他會同步改在你的localhost頁面上，有live server的感覺

//for mac
"dev": "NODE_ENV=development webpack --mode development --open"

//for windows
"dev": "cross-env NODE_ENV=development webpack --mode development --open"
```
## 很重要的一點
在run dev的時候他不會把資料更新至dist
也就是說你改完看到的東西都是src資料夾裡的
他沒有同步轉出到dist資料夾去，所以可能就是我在這環境下開發，
當我覺得差不多的時候才去run一次 start or deploy

但我在想如果我就只run watch然後用live server去看 dist下的index.html
這樣也算是做同樣的事情吧

---

## 所有stats
最後附上所有的[stats](https://webpack.docschina.org/configuration/stats)

>stats: {
assets: true,           	// 添加资源信息
builtAt: true,         	// 添加构建日期和构建时间信息 
cached: true,        	 // 添加缓存（但未构建）模块的信息 
cachedAssets: true,  	 // 顯示暫存的資源（設置為 `false` 則僅顯示輸出的文件） 
children: true,        	 // 加入 children 訊息 
chunks: true,         	 // 加入 chunk 訊息（設置為 `false` 能允許較少的冗长輸出） 
chunkModules: true,   	 // 將建構模塊信息加入到 chunk 信息 
colors: true,         	 // 等同 `webpack --colors` 
entrypoints: false,    	 // 通過對應的 bundle 顯示入口起點 
errors: true,         	 // 加入錯誤訊息 
hash: true,          	 // 加入 compilation 的hash 
maxModules: 15,       	 // 設置要顯示的模塊的最大數量 
modules: true,        	 // 加入建構模塊訊息 
moduleTrace: true,   	 // 顯示警告/錯誤的依賴和來源（webpack 2.5.0 開始） 
performance: true,    	 // 當文件大小超过 `performance.maxAssetSize` 顯示性能提示 
providedExports: false, // 顯示模塊的輸出 
publicPath: true,     	 // 加入 public path 的訊息 
reasons: true,        	 // 加入模塊被引入的原因 
source: false,       	 // 加入模塊的源码 
usedExports: false,    	 // 顯示哪个模塊導出被用到 
version: true,         	 // 加入 webpack 版本信息 
warnings: true,       	 // 加入警告 
}