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

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

npm install webpack-dev-server --save-dev

用來在本地端開啟loacl server

下面這些為基本設定，stats可依照個人喜好增減

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如下圖

接著到package.json在他的"scripts"下新增一段

//--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,        // 加入警告
}