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-serveropen

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

拓展：

// --open 能够在运行npm start 指令后自动打开浏览器

"scripts": {

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

 }