webpack
文章平均质量分 69
zhanle_huang
喜欢编程、对编程有着自己的热情,目前是前端开发为主,平时喜欢研究一些自己觉得好玩的代码
展开
-
基于脚手架@vue/cli 5.0.8搭建vue3项目教程
脚手架可以快速的帮我们搭建一个项目,而不需要我们从头开始去配置和引入插件,使用脚手架5.0.8版本创建的项目,局部webpack是5.x版本的,因此所有的配置均需要使用支持5.x版本的插件使用控制台进入到项目存放目录,使用命令vue create demo创建名为demo的项目选择自定义勾选Babel、Router、Vuex、css预处理、eslint等,如果需要ts的也可以勾选选择vue版本3.x选择n,hash模式,然后选择less作为自己的项目预处理语言。原创 2023-04-19 11:34:55 · 4637 阅读 · 0 评论 -
前端webpack项目性能优化——体积压缩和compression-webpack-plugin的使用
脚手架搭建的项目,会默认开启sourceMap,此时打包下来的包会很大,如图:map文件比所有js文件都大,会导致包整体体积过大,js文件大小超过100k,也很大不符合预期,这还只是空项目的情况下。如果觉得还不够小的话可以通过其他方式进一步进行优化。原创 2023-04-18 09:04:24 · 712 阅读 · 0 评论 -
脚手架vue-cli创建的项目如何基于eslint-webpack-plugin配置eslint在保存时自动修复错误
由于脚手架本身在配置项目时,选择了eslint配置,会自动下载好了eslint-webpack-plugin插件并配置好了的,因此,我们如果按照官网的方式直接配置是不会生效的,因为配置的时候会位于原本的之后,因此调用不到,我们只需要直接获取到已经配置好了的插件相关配置信息,进行修改成我们想要的配置就可以达到目的。脚手架vue-cli创建的项目如何基于eslint-webpack-plugin配置eslint在保存时自动修复错误。原创 2023-04-14 15:02:00 · 291 阅读 · 0 评论 -
webpack中stylelint配置,手动校验样式方案
目前的配置只支持在终端输入命令去校验和修复。stylelint-order 用于样式排序,顺序可以在。stylelintrc.js的数组中配置postcss-html 用于vue和html文件校验postcss-less 用于less文件校验。原创 2022-08-10 16:30:21 · 1080 阅读 · 0 评论