前端项目练习(练习-005-webpack-03)

学习前,首先,创建一个web-005项目,内容和web-004一样。(注意将package.json中的name改为web-005)

前面的代码中,打包工作已经基本完成了,下面开始在本地启动项目。这里需要用到webpack-dev-server插件 (简写: dev-server)。这个插件可用于快速开发应用程序,相当于webpack的开发服务器。它会自动监听代码变化,自动打包构建,自动更新刷新浏览器。

它不会产生dist文件,将打包结果暂时存在内存中,内部的http-sever访问这些文件并读取数据,发送给浏览器。

它会减少磁盘的读取,提高构建效率。

首先,安装webapck-dev-server :

bash 复制代码
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热修改。需要新增一个loader,html-loader,首先执行安装:

bash 复制代码
npm install --save-dev html-loader

下一步,在js文件中,引入html文件:

然后在webpack.config.js中配置html-loader:

执行npm run dev重新启动项目,修改三个文件代码,可以看到,在不重启的情形下,三个文件代码修改的效果都可以实时看到。

相关推荐
@小红花1 小时前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵1 小时前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲1 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年1 小时前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒1 小时前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing1 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说1 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日456702 小时前
学习日记-HTML-day51-9.9
前端·学习·html