沈阳网站建设优化,ps做网站字体用多大的,单页面网站设计网站欣赏,个人电脑做网站服务器网站学习前#xff0c;首先#xff0c;创建一个web-005项目#xff0c;内容和web-004一样。#xff08;注意将package.json中的name改为web-005#xff09; 前面的代码中#xff0c;打包工作已经基本完成了#xff0c;下面开始在本地启动项目。这里需要用到webpack-dev-serv…学习前首先创建一个web-005项目内容和web-004一样。注意将package.json中的name改为web-005 前面的代码中打包工作已经基本完成了下面开始在本地启动项目。这里需要用到webpack-dev-server插件 (简写: dev-server)。这个插件可用于快速开发应用程序相当于webpack的开发服务器。它会自动监听代码变化自动打包构建自动更新刷新浏览器。 它不会产生dist文件将打包结果暂时存在内存中内部的http-sever访问这些文件并读取数据发送给浏览器。
它会减少磁盘的读取提高构建效率。 首先安装webapck-dev-server
npm install webpack-dev-server --save-dev 安装完成后配置webpack.config.js在里面加一个 devServer 配置 其中open:true 表示启动成功后自动打开浏览器port表示端口compress:true 表示压缩。 接下来配置 package.json 在scripts 中增加一条dev指令 这样运行 npm run dev 就可以运行项目了 不用手动访问会自动在浏览器里面打开页面 字体显示红色说明css引入没问题打开浏览器控制台看到打印的日志 说明js文件引入没有问题。 在项目启动完后不重启项目的情况下修改js文件和css文件可以看到项目可以自动刷新并执行最新的代码。 不过目前的项目不支持html热修改。需要新增一个loaderhtml-loader首先执行安装
npm install --save-dev html-loader 下一步在js文件中引入html文件 然后在webpack.config.js中配置html-loader 执行npm run dev重新启动项目修改三个文件代码可以看到在不重启的情形下三个文件代码修改的效果都可以实时看到。
