《深入浅出webpack》学习4——1.6：webpack-dev-server启动本地服务器

1.安装webpack-dev-server
它配合node，帮我们开启本地服务器

2.书中说安装后执行webpack-dev-server即可

但实际会报错：

百度，尝试了webpack-dev-server --line、webpack-dev-server --content-base ./等命令，还是同样的错误
最后成功的方法：配置package.json

配置webpack.config.js：contentBase的./指的是index.html的位置

后执行npm run server提示安装webpack-cli：
重新安装webpack-cli后执行npm run server成功：
不解：直接执行webpack-dev-server --inline却不行
提示：如果webpack.config.js中contentBase没有和index.html的位置对应好，打开浏览器，会显示如下：

注意：此时index.html引用的bundle.js不再是dist/bundle.js，dist目录下不会生成bundle.js,bundle.js是在内存中，但index.html可以正常引用，且二者都是在根目录下，css文件也是

此时，更改js、css文件可以实时刷新，更改html需要手动刷新浏览器。

书上说添加–hot可以实现热替换，但我添加后，反而所有文件都需要手动刷新了
书上说添加–devtool source-map可以使浏览器的源代码显示未编译过的，但不加的时候，浏览器上也是显示未编译过的

自己百度，添加watchContentBase: true后，html文件也实现自动刷新：

我们打包后。js和css文件是放在dist文件夹的，所以为了保持开发和打包目录一直，需要让内存的js css文件也存在于dist目录：添加输出的默认目录（经测试，public不影响build生成文件的输出目录）

然后更改html中引用的js css路径，重启即可。

概念：热更新和刷新
热更新只是局部替换，不会实现页面。

上面实现的都是自动刷新。热替换有空再尝试。