webpack-dev-server是webpack官方提供的乙個小型express伺服器。使用它可以為webpack打包生成的資源檔案提供web服務。
主要提供了2個功能：
為靜態檔案提供服務
自動重新整理和熱替換(hmr)
一般的專案檔案結構為:
|--src
| |--views
| |--index.js
| |--module_a
| |--list.js
| |--module_b
| |--list.js
|--index.html
|--webpack.config.base.js
|--webpack.config.dev.js
那麼有些同學說，我在配置開發伺服器的時候，配置好了，也沒有異常，但是打包的時候出現的配置和我自己手動配置的不一樣這是為什麼?首先看下我自己的配置,
可以清楚的看見我的webpack配置檔案名稱為webpackconfig.js，配置的埠號為3000,並且指向打包後的dist目錄。但是我們打包的時候為什麼會出現8080埠呢？讓我們訪問一下
發現8080埠是從整個根目錄進行展示的，可前面說了，我通過devserver開發伺服器配置中的contentbase屬性將位址指向了dist目錄呀，這個時候讓我們了解一下webpack的預設指向路徑。
因為我的專案是直接初始化 webpack和webpack-cli，這裡為什麼會說我安裝了webpack然後又安裝了webpack-cli,
因為到了webpack4, webpack 已經將 webpack 命令列相關的內容都遷移到
webpack-cli，所以除了 webpack 外，我們還需要安裝 webpack-cli：
看下圖就可以大致了解.
然後看一下上一張圖,上張圖是在node_modules/webpack-cli/bin/config/config-yarn.js中檢視的,這個就是webpack-cli的一些配置，會發現webpack在執行的時候是預設尋找webpack.config.js 或者 webpackfile.js這兩個檔案,那麼我寫的是webpackconfig.js的檔名，當然是找不到的。
這個時候，我們又因為公司專案需求,必須使用自定義配置檔案名稱，這個時候該怎麼辦？當然是修改指令碼命令
介紹一下:
因為所有的指令碼命令都是通過npm執行的,node 開發離不開 npm，而指令碼功能是 npm 最強大、最常用的功能之一。
npm 允許在package.json檔案裡面，使用scripts欄位定義指令碼命令。
,
"keywords": ,
"author": "",
"license": "isc",
"devdependencies": ,
"dependencies":
}
這個時候我們將命令修改為webpack-dev-server --config webpackconfig.js
,
"keywords": ,
"author": "",
"license": "isc",
"devdependencies": ,
"dependencies":
}
發現埠號已經修改並且靜態目錄預設指向了dist目錄.這個時候瀏覽器訪問http://localhost:3000/
發現已經訪問正常，問題就此解決。
webpack dev server的自動更新配置
一 背景 測試發布乙個專案，修改jsx中的內容，頁面不自動更新。每次必須執行npm run build 然後執行npm run start。指令碼如下 scripts build每次要花6秒左右，效率實在不高。二 檢查 1.webpack.config.js module.exports 看的出，執...
webpack dev server的命令引數
加在package.json中scripts物件中 scripts 自動打包後自動開啟瀏覽器 open 加在scripts中的dev 修改埠 port 埠號 自動開啟某個路徑 contentbase 路徑 熱過載 hot 區域性更新，不整個檔案重新打包 可以使瀏覽器非同步重新整理 webpack d...
webpack dev server的命令引數
加在package.json中scripts物件中 scripts 自動打包後自動開啟瀏覽器 open 加在scripts中的dev 修改埠 port 埠號 自動開啟某個路徑 contentbase 路徑 熱過載 hot 區域性更新，不整個檔案重新打包 可以使瀏覽器非同步重新整理 webpack d...