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

2.书中说安装后执行webpack-dev-server即可
《深入浅出webpack》学习4——1.6:webpack-dev-server启动本地服务器
但实际会报错:
《深入浅出webpack》学习4——1.6:webpack-dev-server启动本地服务器

百度,尝试了webpack-dev-server --line、webpack-dev-server --content-base ./等命令,还是同样的错误
最后成功的方法:配置package.json
《深入浅出webpack》学习4——1.6:webpack-dev-server启动本地服务器
配置webpack.config.js:contentBase的./指的是index.html的位置
《深入浅出webpack》学习4——1.6:webpack-dev-server启动本地服务器

后执行npm run server提示安装webpack-cli:
《深入浅出webpack》学习4——1.6:webpack-dev-server启动本地服务器重新安装webpack-cli后执行npm run server成功:
《深入浅出webpack》学习4——1.6:webpack-dev-server启动本地服务器不解:直接执行webpack-dev-server --inline却不行
提示:如果webpack.config.js中contentBase没有和index.html的位置对应好,打开浏览器,会显示如下:
《深入浅出webpack》学习4——1.6:webpack-dev-server启动本地服务器
注意:此时index.html引用的bundle.js不再是dist/bundle.js,dist目录下不会生成bundle.js,bundle.js是在内存中,但index.html可以正常引用,且二者都是在根目录下,css文件也是
《深入浅出webpack》学习4——1.6:webpack-dev-server启动本地服务器

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

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

自己百度,添加watchContentBase: true后,html文件也实现自动刷新:
《深入浅出webpack》学习4——1.6:webpack-dev-server启动本地服务器
我们打包后。js和css文件是放在dist文件夹的,所以为了保持开发和打包目录一直,需要让内存的js css文件也存在于dist目录:添加输出的默认目录(经测试,public不影响build生成文件的输出目录)
《深入浅出webpack》学习4——1.6:webpack-dev-server启动本地服务器
然后更改html中引用的js css路径,重启即可。

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

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

相关文章: