问题
当编写完成代码后，每次都要手动重新打包运行。
解决方式
一、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');
});
