webpack-dev-server

npm install webpack-dev-server -D

• 修改下package.json

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

• 在webpack.config.js配置：

  devServer: {
  contentBase: "./dist",
  open: true,
  port: 8081
  },

• 启动

  npm run server

• 启动服务后，会发现dist⽬录没有了，这是因为devServer把打包后的模块不会放在dist⽬录下，⽽是放到内存中，从⽽提升速度。

HMR:热模块替换

Hot Module Replacement（以下简称 HMR）是 webpack 发展至今引入的最令人兴奋的特性之一 ，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新。

devServer: {
 contentBase: "./dist",
 open: true,
 hot:true,
 // 即使 HMR 不⽣效，让浏览器不⾃动刷新，就开启hotOnly
 hotOnly:true
 },

配置⽂件头部引⼊webpack

const webpack = require("webpack");

在插件配置处添加：

plugins: [ new webpack.HotModuleReplacementPlugin()]