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这种配置文件,需要重新运行一个本地运行的服务命令。不然是不生效的。