
webpack学习笔记
文章平均质量分 73
ICanWin_lll
这个作者很懒,什么都没留下…
展开
-
webpack的性能优化(二)——减少打包体积
webpack的性能优化之减少打包体积,可以通过CDN链接引入第三方库,压缩代码,tree shaking等等。原创 2024-01-10 00:27:55 · 2595 阅读 · 0 评论 -
webpack的性能优化(一)——分包优化
默认情况下,Webpack 会将所有代码构建成一个单独的包,这在小型项目通常不会有明显的性能问题,但伴随着项目的推进,包体积逐步增长可能会导致应用的响应耗时越来越长。资源冗余缓存失效这些问题都可以通过代码分离解决,例如中的资源通常变动较少,可以抽成一个独立的包,那么业务代码的频繁变动不会导致这部分第三方库资源被无意义地重复加载。代码分离(Code Splitting)是webpack一个非常重要的特性:它主要的目的是将代码分离到不同的bundle中,之后我们可以按需加载,或者并行加载这些文件;原创 2024-01-08 00:28:22 · 2984 阅读 · 0 评论 -
webpack-资源模块类型(asset module type)使用详解
资源模块类型(asset module type)的使用详解,asset/resource,asset,asset/inline,asset/source原创 2023-03-01 20:20:54 · 891 阅读 · 1 评论 -
VUE程序运行过程-runtime-complier和runtime-only的区别
一.VUE程序运行过程当把template传递给vue实例的时候,vue实例会把该模板内容保存到vm.options,然后对该template解析成ast(抽象语法树)将ast编译为render()函数,通过render函数翻译成虚拟DOM将虚拟DOM渲染成真实的DOM二.Runtime-Compiler和Runtime-only1.Runtime-Compiler:选择Runtime-Compiler创建的项目main.js:import Vue from 'vu原创 2022-01-26 17:10:09 · 808 阅读 · 0 评论 -
webpack配置的分离
webpack.config.js文件中的配置,有些是开发时需要生产环境不需要,比如webpack-dev-server,有些配置是开发环境不需要,生产环境需要,比如压缩js代码的配置,因此对这里的配置做一个分离。base.config.js:用来放公共的配置,开发和生产环境都需要的配置prod.config.js:只用在生产环境的配置 uglifyjsWenpackPlugindev.congif.js:只用在开发环境的配置 devServerwebpack-margin:对两个配置文..原创 2022-01-23 20:57:28 · 550 阅读 · 0 评论 -
webpack搭建本地服务器
webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js搭建,内部使用express框架,可以实现我们想要的让浏览器自动刷新显示我们修改后的结果使用方法:1.安装npm install --save-dev webpack-dev-server@2.9.12.在webpack.config.js文件中添加配置项devserver也是作为webpack中的一个选项,选项本身可以设置如下属性: contentBase:为哪一个文件夹提供本地服务,默认是根文件夹,原创 2022-01-23 20:30:51 · 226 阅读 · 0 评论 -
webpack中配置vue
一.下载使用vue注:因为我们后续是在实际项目中也会使用vue的,所以并不是开发时依赖在main.js中引用vue重新打包,运行程序,报错:这个错误说的是我们使用的是runtime-only版本的Vue,应该使用runtime-compiler所以我们修改webpack的配置,添加如下内容即可:二.el和template区别el:el用于指定Vue要管理的DOM,与index.html 中的 #app 进行绑定,让Vue实例之后可以管理它其中的内容,...原创 2022-01-23 18:59:32 · 1476 阅读 · 0 评论 -
VUE-webpack超详细教程
一.认识webpack官网解释:从本质上来讲,webpack是一个现代的JavaScript应用的静态模块打包工具。从模块化和打包两个角度来理解:模块化:webpack其中一个核心就是让我们可能进行模块化开发,并且会帮助我们处理模块间的依赖关系,而且不仅仅是JavaScript文件,CSS、图片、json文件等等在webpack中都可以被当做模块来使用打包:合并成一个或多个包(Bundle),并且在打包的过程中,还可以对资源进行处理,比如压缩图片,将scss转成css,将ES6语法转原创 2022-01-21 18:07:25 · 24608 阅读 · 6 评论