webpack基础知识学习(七)--本地服务器搭建

通过前面的学习，我们每次测试我们修改的文件是否正确，我们都要手动的去运行npm run build操作，然后查看页面是否更新，而且我们还用到了vscode的插件--live-server，这样不适十分合理，我们就像这些插件是否都能在webpack端实现呢？答案是显然的。

watch方法

首先我们只需要在webpack.config.js文件中添加一个配置watch: true就能实现，当我们修改src下的文件时，webpack就会自动帮我们重新打包，然后更新build文件夹下的文件，我们本来就在用live-server监听build文件下的页面，所以浏览器就会刷新了，这么来看，我们其实很简单的就完成了这个任务，但是其实是有性能问题的。 watch方法的缺点：所有源代码都会重新编译，而且每次都会删除build文件夹，重新生成文件，性能消耗很大。而且不能实现局部刷新。还用到了live-server.

webpack server

1.首先安装yarn add webpack-dev-server -D。
2.在package.json中配置一个短命令

// package.json

"scripts": {
    "build": "webpack",
    "serve": "webpack server"
},

3.运行npm run serve。发现也会帮我们启动一个服务，而且他还不会产生build文件夹，因为这个服务是直接运行在内存的，所以他的速度很快，不用读写文件。

我们可以在webpack.config.json中配置devServer的属性，比如我改了端口号。