webpack開發服務器(webpack-dev-server)的簡單配置使用

webpack開發服務器(webpack-dev-server)的簡單配置使用

配置本地開發服務器。

1）安裝webpack-dev-server 插件。
yarn add [email protected] --dev (版本自定, 我的webpack版本爲3.10.0)

2）在webpack.config.js 中添加配置項。

devServer:{
		port:8000,  //端口設置
		// 添加打包文件夾路徑
		contentBase:path.join(__dirname,"dist")
},

3）啓動開發服務器：node_modules/.bin/webpack-dev-server
頁面如下：

4）瀏覽器訪問：localhost:8000即可。

5）簡化打包和啓動開發服務器命令。
我們每次都要輸入：node_modules/.bin/webpack 打包文件 和 node_modules/.bin/webpack-dev-server 啓動服務器是比較繁瑣的，故我們在package.json文件中添加scripts配置項：

6）通過 npm run build (或者yarn run build) 的命令執行打包，這取決於你安裝的是npm還是yarn。

7) 通過 npm run dev (或者yarn run dev) 的啓動開發服務器。

8）重新訪問localhost:8000即可，啓動之後，頁面和依賴的改動都能及時自動打包然後更新頁面：
如：在本人的項目組件添加<i className='fa fa-snowflake-o'> </i> （雪花圖標），保存後的頁面變化：