问题

当编写完成代码后，每次都要手动重新打包运行。

解决方式

一、watch

执行npm run watch命令，会监听源文件的改变并重新打包。
缺点：一是需要自己手动刷新，二是没有起服务，无法使用ajax请求。
package.json

"scripts": {
  // 使用：npm run bundle ，执行这句话相当于执行 webpack
  "bundle": "webpack",
  "watch": "webpack --watch"
},

二、webpack-dev-server

自动重新打包和启动浏览器，刷新页面，转发请求等。
webpack-dev-server只是将打包结果放在内存中，并不会写入实际的bundle.js，在每次webpack-dev-server接收到请求时都只是将内存中的打包结果返回给浏览器。

npm install webpack-dev-server -D

package.json

"scripts": {
  // 使用：npm run bundle ，执行这句话相当于执行 webpack
  "bundle": "webpack",
  "watch": "webpack --watch",
  "start": "webpack-dev-server"
},

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',  // 入口文件
  devServer: {
    contentBase: './dist', // 根目录，默认同级
    open: true,  // 自动打开浏览器
    port: 8080 // 端口号
  },
  output: {
    filename: 'bundle.js',  // 文件名
    path: path.resolve(__dirname, 'dist')  // 文件夹
  }
}

三、node server.js

自己手写一个类似DevServer的node服务，也就是在node中使用webpack。
缺点就是完善的功能需要书写的代码太复杂，下面这个也是需要自己手动刷新。

npm install express webpack-dev-middleware -D

package.json

"scripts": {
  // 使用：npm run bundle ，执行这句话相当于执行 webpack
  "bundle": "webpack",
  "watch": "webpack --watch",
  "start": "webpack-dev-server",
  "server": "node server.js"
},

在和package.json同级的地方新建server.js文件
server.js

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware'); // 中间件
const config = require('./webpack.config.js'); // 配置
const complier = webpack(config); // 编译器

const app = express();

app.use(webpackDevMiddleware(complier, {}));

app.listen(3000, () => {
  console.log('server is running');
});