webpack本地服务实现自动化

webpack本地服务实现自动化

单入口打包项目，在上篇文章已经有所了解，但是在这之中，存在一个问题，每次我们的文件进行修改，都是需要重新打包的
不然dist的内容依然是我们修改之前的内容。下面就开始

如何实现webpack自动化打包浏览？
1.我们需要借助一个包webpack-dev-server，创建一个本地服务器，自动重新构建包，并预览

通过命令安装插件:

npm install webpack-dev-server -D (将本地服务安装到开发环境)

安装完成后，在webpack.config.json 文件添加 devServer属性进行配置

	devServer: {				//在内存中打包,所有的内容是在根目录（浏览器内存，不会生成到本地的dist目录）
	  port: 9000,					//设置端口号
	  open:true,					//是否自动打开浏览器
	  compress: true,				//是否压缩代码
	  contentBase: "static",		//启动配置一个可以访问的静态资源文件
	  hot:true						//自动刷新
	},
	

当我们配置完毕，还需要启动服务，在我们的 package.json >>> scripts 下创建命令

"devServer":"webpack-dev-server"

执行本地服务命令:npm run devServer

contentBase：
他的作用其实就是配置一个快捷访问static这个目录下文件的方法。
配置完了以后，直接在浏览器的后方添加static这个文件下你像访问的目录即可直接访问

这样我们就实现了，webpack更改内部文件浏览器就自动刷新，并预览的功能。在这之中，注意，如果我们修改了如package.json这种配置文件，需要重新运行一个本地运行的服务命令。不然是不生效的。