Using webpack-dev-server

官方講解地址：https://webpack.js.org/guides/development/#using-webpack-dev-server

The webpack-dev-server provides you with a simple web server and the ability to use live reloading. Let's set it up:

功能：開啓一個web服務器，方便使用ajax請求，同時可以實現熱更新。

1.安裝webpack-dev-server

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

2.修改webpack.config.js. 添加devServer: { .....}

module.exports = {
  devServer: {
    contentBase: './dist'
  }
}

contentBase: './dist'  是指在webpack.config.js同級目錄下的dist目錄下開啓一個web服務器

3.修改package.json 添加"scripts": { "start": "webpack-dev-server"}

"scripts": {
  "start": "webpack-dev-server"
}

4.運行npm start 開啓服務

npm start

 5.打開瀏覽器

  輸入：http://localhost:8080

拓展：

A.自動打開瀏覽器

// 若是想執行 npm start 後自動打開瀏覽器，有如下方案可供選擇
// 1.在package.json文件中，添加 --open

"scripts": {

  "start": "webpack-dev-server --open"

 }

// 2.在webpack.config.js 的devServer下， 添加 open: true

  devServer: {

    contentBase: './dist',

    open: true

  }

 B.接口代理

// 當訪問 /api 這個路徑時會自動轉發到 http://localhost:8080 
// 由於vue的腳手架用到了webpack 因此也是使用這個實現接口代理的。

module.exports = {
  //...
  devServer: {
    port: 8080, 
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
};

更多拓展請移步：https://webpack.js.org/configuration/dev-server/