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/