一、webpack提供的本地服務(wù)

在開發(fā)階段，可以指定本地服務(wù)器管理最后要發(fā)布的dist文件，將dist文件存放在內(nèi)存中，每次修改代碼想要查看效果時，不需要使用npm run webpack的命令，本地服務(wù)器會將變化動態(tài)的映射到瀏覽器中，瀏覽器會自動刷新，顯示修改后的結(jié)構(gòu)，最后開發(fā)完成時，使用一次npm run build打包發(fā)布dist文件。

二、使用本地服務(wù)器

1.安裝webpack-dev-server

npm install webpack-dev-server@(指定版本) --save-dev

2.配置webpack.config.js中的devServer
contentBase：為哪一個文件夾提供本地服務(wù)，默認是根文件夾，我們這里要填寫./dist
port：端口號
inline：頁面實時刷新
historyApiFallback：在SPA頁面中，依賴HTML5的history模式

  devServer: {
    contentBase: './dist',
    inline: true
  }

3.簡化指定命令
在package.json的script中添加webpack-dev-server的簡化指令
--open自動打開生成的本地服務(wù)器的地址

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  }

4.執(zhí)行npm run dev
生成默認地址：http://localhost:8080/

image.png