摘要: npm i -D thread-loader 和babel-loader一块使用 thread-loader可以放在需要多线程处理的loader的最上方,最后执行 开启多线程打包,进程启动大概600ms,进程通信也要开销,因此,只有工作消耗时间比较长,才需要多线程打包。 use: [{ loader 阅读全文
posted @ 2021-12-07 10:47 STRIVE-PHY 阅读(328) 评论(0) 推荐(0)
摘要: 渐进式网络开发应用程序(离线可访问) npm i -D workbox-webpack-plugin const WorkboxPlugin = require('workbox-webpack-plugin'); ...... plugins:[ new WorkboxPlugin.Generat 阅读全文
posted @ 2021-12-07 10:38 STRIVE-PHY 阅读(79) 评论(0) 推荐(0)
摘要: 懒加载:当文件需要使用时才加载 预加载:会在使用之前,提前加载js文件(等其他资源加载完毕,浏览器空闲了,在偷偷加载资源,适用于pc端)兼容性问题严重,caniuse查看是否使用该技术 ​ 扩展:正常加载可以认为是并行加载(同一时间加载多个文件) //test.js console.log('tes 阅读全文
posted @ 2021-12-07 10:37 STRIVE-PHY 阅读(133) 评论(0) 推荐(0)
摘要: 将打包一个chunk文件分成多个文件,可以实现各项功能,实现按需加载。(多个js文件并行加载,速度更快) 方式一:多入口 (不常用) //多入口,webpack后会生成对应个chunk文件 entry:{ index:'./src/js/index.js', test:'./src/js/test. 阅读全文
posted @ 2021-12-07 10:37 STRIVE-PHY 阅读(80) 评论(0) 推荐(0)
摘要: 使用dll技术,对某些库(第三方库:jquery,react,vue...)进行单独打包,仅打包一次 新建webpack.dll.js文件,该文件用于配置需要单独打包的库 const { resolve, join } = require("path"); const webpack = requi 阅读全文
posted @ 2021-12-07 10:36 STRIVE-PHY 阅读(82) 评论(0) 推荐(0)
摘要: source-map [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map 一种提供源代码到构建后代码映射技术(如果构建后代码出错,通过映射可以追踪源代码错位) 1、使用:devtool:'source-map' 1)devto 阅读全文
posted @ 2021-12-07 10:32 STRIVE-PHY 阅读(131) 评论(0) 推荐(0)
摘要: HMR(hot module replacement热模块替换) 一个模块发生变化,只会重新打包这一个模块,极大提升构建速度。 启用HRM 更新 webpack-dev-server 配置, 然后使用 webpack 内置的 HMR 插件。 devServer: { // 开启HMR功能 // 修改 阅读全文
posted @ 2021-12-07 10:31 STRIVE-PHY 阅读(165) 评论(0) 推荐(0)
摘要: 1、基本js兼容性处理 --> @babel/preset-env 只能转换基本语法,promise等高级语法不能转换 官方文档:https://webpack.docschina.org/loaders/babel-loader/ 1)安装 npm install -D babel-loader 阅读全文
posted @ 2021-12-01 13:48 STRIVE-PHY 阅读(179) 评论(0) 推荐(0)
摘要: 1、安装配置 eslint-webpack-plugin 1)安装 eslint-webpack-plugin:(该插件使用 eslint 来查找和修复 JavaScript 代码中的问题。) npm install eslint-webpack-plugin --save-dev 注意: 如果未安 阅读全文
posted @ 2021-12-01 10:21 STRIVE-PHY 阅读(464) 评论(0) 推荐(0)
摘要: 作用:让父组件可以向子组件指定位置插入HTML结构,也是一种组件通信的方式,适用于 父组件==>子组件。 分类:默认插槽、具名插槽、作用域插槽 使用方式: 默认插槽 父组件: <Son> <div>html结构</div> </Son> 子组件: <template> <div> <!--定义插槽- 阅读全文
posted @ 2021-11-22 09:54 STRIVE-PHY 阅读(143) 评论(0) 推荐(0)