haosicx的博客

ps: 一旦用了自动导入插件 , 我们定义在components文件夹下的全局组件也可以直接使用了。当然这个插件可以解析不同的第三方组件库 比如element antv这样的都可以。比如我们想作用于element 也是可以的。然后在vite.config.ts中配置。

如果设置 env 变量，却没有赋值，–env production 默认表示将 env.production 设置为 true。看看src/GlobalConfigs的文件目录。那环境变量具体是怎么使用的呢。

注意，在环境特定的配置中使用 merge() 功能，可以很方便地引用 webpack.dev.js 和 webpack.prod.js 中公用的 common 配置。webpack-merge 工具提供了各种 merge(合并) 高级功能，但是在我们的用例中，无需用到这些功能。

我发现webpack的配置里有个这个属性。于是我打算这样去实现这个方法。

文章目录为什么要设置缓存输出文件的文件名缓存第三方库将js文件放到一个文件夹中为什么要设置缓存我们使用webpack来打包我们模块化以后的应用程序 , webpack会生成一个可以部署的dist目录 , 然后我们把打包好的内容放置在这个目录里 , 将来我们把这个目录的内容部署到服务器上 , 浏览器就可以访问这个服务器上的网站和资源了而最后一步获取资源是比较耗时间的 所以浏览器会使用一个叫做缓存的技术我们可以通过命中缓存去降低网络流量 , 使网站加载速度更快然而我们在部署新版本的时候

文章目录什么是代码分离代码分离的好处常用的代码分离方法入口节点分离法防止重复动态导入import动态导入 魔法注释懒加载 ( 动态导入方法的应用 )预获取/预加载模块prefetch尝试什么是代码分离代码分离是webpack的特性之一可以把代码分离到不同的bundle中 bundle就是我们打包分离出来的文件然后就可以把这些文件按需加载或者并行加载代码分离的好处可以用于获取更小的bundle 以及控制资源加载的优先级 如果使用合理 可以极大的影响首屏的加载时间常用的代码分离方法第

文章目录引导使用bable-loader 把ES6转化成ES5regeneratorRuntime插件引导上一篇讲解了 webpack的css抽离和压缩之前我们用了less-loader编译了less文件 用css-loader编译了css文件那么js文件需要编译吗?– 我们在页面中写一个promise定时器2秒后打印hello word打包后我们观察输出的bundle.js文件 发现我们的ES6代码 被原封不动的打包到了这个文件里这就引发了一个问题 !!!不是所有浏览器都支

文章目录引导mini-css-extract-plugin自定义打包出来的css文件路径和文件名称css压缩 `css-minimizer-webpack-plugin`引导上一篇讲解了 webpack的loader我们已经可以通过loader加载css了 但是现在的代码是和html在一起的我需要把style的代码放置到一个单独的文件里通过link去加载mini-css-extract-plugin这个功能需要一个插件npm i mini-css-extract-plugin -D–

文章目录引导loader使用loader去加载一个css模块style-loaderloader解析css预处理器引导上一篇讲解了 webpack的asset资源模块除了资源模块 还可以通过loader来引入其他类型的文件loaderwebpack只能解析js和json这样的文件loader可以让webpack解析其他类型的文件 并且转化成模块来供我们使用使用loader去加载一个css模块如果我们不加loader去解析css 打包的时候就会报错显示识别不了css所以在项目

文章目录引导资源模块asset module type`asset / resource 导出图片资源`修改asset/resource模块下打包后的资源路径和文件名`asset / inline 资源转化成base64``asset / source 读取资源的内容``asset通用数据类型自动转换`引导上一篇讲解了webpack搭建开发环境有一个问题 到目前为止 项目只能加载JS但是我们想混合一些其他的资源怎么办呢?– 比如images/ 字体 / 图标等资源模块asset modu

文章目录引导mode(打包选项)soucre map(精准定位代码的行数)使用watch mode(观察模式)webpack-dev-server热更新webpack-devServer的原理引导上一篇讲解了 webpack的插件但是之前我们每次更新了代码 都要重新刷新浏览器看到新的效果– 很多的操作都是要自己手动去做 非常的不方便我们可以搭建一个开发环境来使开发变得更加轻松mode(打包选项)首先看到webpack.config.js里的配置我们把mode改成developmen

项目的开发过程中 经常会遇到跨域的问题跨域: 浏览器往服务器发送请求的时候– 域名 端口 地址都相同才可以 不然就是跨域解决方案一般是后端配置cors请求头为* 允许跨域– 还有一种方式就上去前端配置反向代理进行跨域– 重点: 服务器向服务器发送请求是不会跨域的– 所以遇到了跨域 就需要用本地的服务器去发请求在开发vue项目的时候 webpack都会给我们开启一个本地服务器所以可以通过webpack的配置去配置本地服务器在vue.config.js中进行配置– 在axios里把根