- 博客(11)
- 收藏
- 关注
RSS订阅原创 webpack5 module chunk bundle的区别
chunk 多模块合成的，如 entry import splitChunk。module 各个源码文件，webpack中一切都是模块。bundle 最终输出的文件，与chunk一一对应。
2024-04-02 13:47:22
131
1
原创 webpack5 IgnorePlugin和noParse
处理时间的lib import moment from moment。1、ignorePlugin直接不引入，代码中没有。· 默认会引入所有js代码，代码过大。2、noParse引入，但不打包。· 如何只引入需要的模块。
2024-04-01 19:03:54
362
原创 webpack5 配置react和vue框架
babel/preset-react用于编译jsx语法。vue-loader用于编译vue。配置.babelrc。
2024-03-13 15:36:35
255
1
原创 webpack5 DLLPlugin
DLLPlugin动态连接库，可以提升开发环境代码的编译速度为什么使用：1. 前端框架Vue、React体积大，构建慢2. 比较稳定，基本不会升级版本3. 同一个版本之构建一次，不会每次都重新构建4. 并且webpack已经内置支持了DLLPlugin。
2024-03-12 19:01:31
308
1
原创 webpack5 抽离第三方代码和业务代码
对于大面积使用的第三方代码以及在业务中多次引用的业务代码需要进行抽离，避免在生产环境下浏览器重复请求加载。
2024-03-12 18:36:18
279
1
原创 webpack5 抽离css
在生产环境中如果使用style-loader将css代码嵌入到html文件中可能会发生意外，所以在生产环境下，需要对css代码进行抽离，抽离过后，html会已外链的形势引入css。开发环境可以依然使用style-loader。
2024-03-12 16:46:38
202
原创 webpack5 多入口
在打包前需要将输出目录，这里是dist目录，里面的文件清空，需要安装clean-webpack-plugin插件。设置入口文件为src目录下的index.js和other.js文件。需要安装html-webpack-plugin插件。
2024-03-12 16:25:44
278
1
原创 webpack5 基本配置
loader 的执行顺序是：从后往前， css-loader用于处理css文件，将css文件打包到js中，配合style-loader使用，将css文件打包并插入到页面中。当内容不发生变化时，文件的哈希值不会发生改变，再次需要改文件时直接从缓存读取，如果内容发生了改变， 文件的哈希值也会发生改变，需要重新加载。在基本配置中配置babel-loader，需要先安装依赖，babel-loader会将es语法进行兼容性转化。如果是在测试的环境中， 需要安装对应插件file-loader或者url-loader。
2024-03-12 15:56:24
417
1
原创 h5移动端适配
通常如果要实现响应式的尺寸，会使用rem和vw，rem是相对于跟元素的字体大小，vw是相对于适口的大小，1vw相当于总宽的的1%。在日常的开发中，设计师给的设计稿的尺寸一般为375和750像素的，但是用户使用的手机的尺寸都是不一样的，需要根据设计尺寸生成适合所有手机的尺寸。用于将 px 单位转化为 vw/vh 单位，但是vant组件的设计稿尺寸为375，往往不适配一般的750设计稿。autoprefixer插件，为兼容所有浏览器，部分CSS属性需要加上不同的浏览器前缀，
2024-03-11 21:17:24
483
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人