webpack4.41.0配置四(热替换)

时间 2019-11-09

标签 webpack4.41.0 webpack 配置替换繁體版

原文原文链接

每次修改都要去编译，这个操做比较繁琐。因此咱们但愿编译过程是自动化的，并且页面的更新也是自动化的。因此须要使用这个热替换html

1.首先安装webpack-dev-server：npm install webpack-dev-server -D(-D生产环境下)webpack

（做用为：启动服务而且可以支持热替换）git

2.更改一下咱们的配置文件github

3.启动webpack-dev-serverweb

由于咱们没有全局安装webpack-dev-server，因此不能在终端输入webpack-dev-server去启动，咱们须要去package.json中建立命令npm

之因此这个方式能够，是由于它们查找的方式不同，它会先去mode_modules文件夹中寻找webpack-dev-server。在终端直接输入webpack-dev-server会去path路径中去找。json

执行npm run start浏览器

启动以后能够去浏览器中输入localhost:8080访问页面服务器

而后能够在template.html中修改页面内容，便可获得当即更新webpack-dev-server

4.添加热替换功能

而后从新npm run start,如今就是具有热替换功能的服务器了

当hotOnly:false时，咱们在页面进行了更改只须要保存，不须要进行页面更新就能够获得修改事后的数据

因此说这是一个坑，咱们能够把hotOnly在配置中去掉，webpack都具有热替换的功能(只是webpack4和webpack3不同的地方，webpack3须要明确的指出hotOnly才会具有热替换的功能)

最后webpack4.41.0环境搭建和简单使用就到此结束啦！以后须要本身多结合项目去深刻理解！
最后附上我学习Webpack中的学习视频：https://www.bilibili.com/video/av51893932/