Webpack
Webpack和Vite笔记
永久旅途
这个作者很懒,什么都没留下…
展开
-
Vite打包时使用plugin解决浏览器兼容问题
在终端输入如下命令:在项目目录下创建vite.config.js文件夹,配置如下代码:打包完成以后会有两个js代码,其中一个文件名中带有legacy,我们目标文件就是带有legacy的文件 这时候我们的箭头函数就转化为了兼容性更高的普通函数原创 2023-09-24 21:20:40 · 1347 阅读 · 0 评论 -
使用命令行快速创建Vite项目
Vanilla是我们常用的JavaScript,Vue和React是常用前端框架,可以根据自己的需要进行选择通过上下键进行选择,按下回车进行确认创建完成。原创 2023-09-24 20:28:13 · 451 阅读 · 0 评论 -
Vite的安装与使用
Vite也是前端的构建工具,相较于Webpack,Vite使用了不同的运行方式:开发时并不对项目进行打包,而是直接采用ESM的方式来运行项目。在项目部署时再进行打包。因此vite的执行速度相较于Webpack快了许多,操作起来也比Webpack更加方便。原创 2023-09-24 20:11:13 · 2385 阅读 · 0 评论 -
Webpack设置代码映射,可调试打包后的代码
在调试台中找到 src文件夹下的index.js文件,即为代码源码。这时候我们就调试不了我们的代码。原创 2023-09-22 19:22:56 · 184 阅读 · 0 评论 -
Webpack监视文件修改,自动重新打包文件
在终端中输入以下指令:我们使用这种方法监听文件变化时只会监听我们计算机本地的文件变化,在开发场景中我们的项目是要部署到服务器中的,因此这种方式并不推荐。原创 2023-09-22 19:06:11 · 799 阅读 · 0 评论 -
Webpack使用plugin插件自动在打包目录生成html文件
我们使用html-webpack-plugin插件可以自动在打包代码目录生成html文件。原创 2023-09-22 18:45:21 · 423 阅读 · 0 评论 -
Webpack打包时Bable解决浏览器兼容问题
当我们使用js新特性语法编写代码时,在旧的浏览器中兼容性并不好。但是我们希望能够在旧浏览器中使用这些新特性。使用babel可以使js新代码转换为js旧代码,增加浏览器的兼容性。如果我们希望在Webpack中支持babel,则需要在Webpack中引入babel的loader。原创 2023-09-22 15:18:58 · 521 阅读 · 0 评论 -
Webpack打包图片
打包后dist目录下成功出现打包后的图片。原创 2023-09-21 21:02:36 · 271 阅读 · 0 评论 -
Webpack打包CSS文件,解决You may need an appropriate loader to handle this file type报错
在项目文件夹下创建webpack.config.js文件,该文件就是Webpack的配置文件Webpack在默认情况下只能打包js文件,如果我们希望他能够打包其他类型的文件,我们就需要在webpack.config.js文件中使用loader进行配置。原创 2023-09-21 20:32:42 · 1100 阅读 · 0 评论 -
Webpack使用output配置打包代码信息和自动清理打包目录
如果我们将打包文件名修改再进行打包,会发现之前不同名的打包文件会进行保留。在output对象中配置clean属性可自动清理打包目录。原创 2023-09-18 19:50:19 · 114 阅读 · 0 评论 -
Webpack配置entry修改入口文件或打包多个文件
当我们使用Webpack进行文件打包时,默认打包的文件是src文件下的index.js文件。原创 2023-09-18 19:23:11 · 512 阅读 · 0 评论 -
构建工具Webpack简介
构建工具就起到这样一个作用,通过构建工具库将使用ESM规范编写的代码转换为旧的JS语法,这样可以使得所有的浏览器可以支持代码。这里使用-D目的是为了安装开发依赖,我们只需要在开发的时候使用Webpack打包工具,在实际的项目中是不需要使用的。观察我们会发现原本src里有3个目录,而打包过后始终只有main.js这一个文件,并且文件中的代码只显示在一行。当我们代码比较简单的时候,我们并不能看出Webpack打包工具的具体作用。dist下面的main.js中的内容与index.js中的内容是相同的。原创 2023-09-18 11:34:21 · 315 阅读 · 0 评论