externals: { 'vue': 'Vue', // 左侧vue是我们自己引入时候要用的，右侧是开发依赖库的作者定义的，是固定值，不同的库的这个值需要到相应的库的开发文档中获取，其实这个值最终就是绑定到...// 左侧vue是我们自己引入时候要用的，右侧是开发依赖库的主人定义的不能修改 'vue-router': 'VueRouter', 'vuex': 'Vuex',...文件，启动项目后，google浏览器vue开发插件无法工作，也是纠结了很久才找到是这个原因导致的。...“ 稍微注意点我们就会发现在vue-cli生成的项目，index.html里面有这样一句代码 favicon.ico"> 代码里面动态输出了一个变量...App', xhtml: false }, options); } } 上面的代码肯定不陌生，就是我们在写插件或者库的时候接收对象类型参数时，用来做传入参数和默认值的合并用的。
目录 Webpack 的工作原理 loader 和 plugin 的区别 webpack 如何处理 css 文件 三种样式 sass/scss 和 less 的区别 另一种定义全局 less 变量的方法...源码 ---- Webpack 的工作原理 默认 webpack 只能处理 js 文件，如果在 js 文件中导入了 css 代码： import '..../style.css'")'; 先经过 css-loader 和 style-loader 的处理，这样css代码就能正常工作了。 这种方式每次引入时都需要加上“style-loader!...less Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数. Less 既可以在客户端上运行，也可在服务端运行。...结论：Sass 功能虽比 Less 强大，但 Less 相对清晰明了，易于上手，对环境要求宽松。快速开发使用 less 足够。
1.commonjs只会对require的代码执行一次 之后的require只会直接取其导出值 2.es6 Module动态映射,CommonJs是值拷贝，前者可以支持一定程度的循环依赖，需要由开发保证导入时...不推荐使用 10....·babel-loader：它是使Babel与Webpack协同工作的模块。 ·@babel/core：顾名思义，它是Babel编译器的核心模块。..., 本身配置：应放在工程目…/, use: ‘file-loader’, } ], 16.output.path是资源的打包输出路径，output.publicPath是资源引用路径 17.vue-loader...在安装时，除了必要的vue与vue-loader以外，还要安装vue-template-compiler来编译Vue模板，以及css-loader来处理样式（如果使用SCSS或LESS则仍需要对应的loader
） 2、webpack-app 微应用开发环境启动后的访问地址 http://localhost:4000 使用 Vue3 + webpack + Element Plus 搭建 引用自己封装的组件...aehyok-form-vue3 进行demo页面的初始化，包括动态form表单和动态table列表，以及json阅读器 根据json配置对象直接生成动态form表单，目前已经完成基本架构，待有时间继续完善细节...中联邦模块 Module Federation） 动态form表单生成器（已单独抽离到npm发包，具体可查看aehyok-form-vue3） 动态table表单生成器（已单独抽离到npm发包.../main-vite-app-ts" #主应用 "/e/work/aehyok/github/vue-qiankun/webpack-app" # webpack-app...本文中不涉及到代码，有关代码问题可以访问文章开头的微前端github demo 仓库，github仓库将会保持持续更新，不断优化小demo。
在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: main.js: //在webpack中使用vue //注意在webpack中 使用 import Vue from 'vue' 导入的...}) 2.在main.js中引入vue的包使用优雅的import Vue from 'vue'方式导入 main.js: //在webpack中使用vue //注意在webpack中 使用 import...alias:{//设置vue被导入时候的包的路径 "vue$":"vue/dist/vue.js" } } }
使用绝对路径的话，这类资源将会直接被拷贝，而不会经过 webpack 的处理。 如果src是变量的话，我们一般会在data中定一个变量src进行动态绑定。...原理 从相对路径导入 当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。...用绝对路径引入时，路径读取的是public文件夹中的资源，任何放置在 public 文件夹的静态资源都会被简单的复制到编译后的目录中，而不经过 webpack特殊处理。...通过上面的介绍，我们可以看到，url-loader工作分两种情况：1.文件大小小于limit参数，url-loader将会把文件转为DataURL；2.文件大小大于limit，url-loader会调用...希望在这里，和你分享我的前端学习和工作经验，记录个人成长。 想要获取更多前端精彩内容，关注我(全网同名)，解锁前端成长新姿势。
解决原理 由于vue脚手架每次打包时，都会将打出的静态资源文件名加个哈希后缀，且index.html中引入时也加了对应的哈希后缀，所以每个版本的静态资源都是全新的，不用担心因升级导致的缓存问题。...那么只需让index.html不缓存，且让其他静态资源缓存，就能实现要求。 让静态资源有缓存好办，问题在于怎么只让index.html不缓存。...的配置文件 configureWebpack: { // webpack 配置 output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】...${process.env.VUE_APP_Version}....${process.env.VUE_APP_Version}.
+Less/Scss+Typescript的单页/多页脚手架 github地址： 基于webpack4.0搭建的脚手架（支持react/vue/typescript/es6+/jquery+less/scss...下面是基于该文章的webpack4.0的思维导图： 后台回复：webpack思维导图，获得思维导图高清原图 2.webpack核心概念 入口：指示 webpack 应该使用哪个模块作为入口起点 输出：.../styles/app.css' 复制代码 此时打开浏览器，可以看到css生效了： 现在css导入虽然生效了，但是是有js动态创建添加到head里面的，如果后期项目复杂了，将会严重影响项目的加载速度，所以我们这里需要另一个插件...就可以动态的添加到html页面中了，这里我要说一下在new HtmlWebpackPlugin中我们添加了chunks数组，这个数组就是我们要打包进页面的js，main和about分别代表入口的名字，vender...2.支持vue 首先先安装对应npm包： npm install -D vue-loader vue-template-compiler 复制代码 之后在webpack的配置文件中写入如下代码： //
不优化都不能使用吗？ 性能优化是一个高级前端的必要技能吗？...插件分析打包产物 http相关： 1.gzip压缩 2.强缓存、协商缓存 图片相关： 1.图片压缩 2.图片懒加载 3.雪碧图、使用字体图标、svg webpack相关： 1.优化文件搜索 2.多进程打包...3.时刻关注可能会存在性能问题的部分，比如： 路由组件异步加载 动态加载一些初始不需要用到的资源 频繁切换的组件使用KeepAlive进行缓存 缓存复杂或常用的计算结果 对实时性不高的接口进行缓存 同一个接口多次请求时取消上一次没有完成的请求...，其实就是写代码的基本要求，另外我觉得如果业务复杂，以上这些也并不能阻止性能问题的出现，更多的还是当出现了问题，去思考如何解决。...，即将三十而立却立不起来，这么多年的工作，更多的只是收获了六年的经历，但是并没有六年的能力，回过头看，当初的有些选择确实是错误的，也许这就是人生把。
本教程采用 Vue 作为主应用基座，接入不同技术栈的微应用。如果你不懂 Vue 也没关系，我们在搭建主应用基座的教程尽量不涉及 Vue 的 API，涉及到 API 的地方都会给出解释。...qiankun 内部通过 import-entry-html 加载微应用，要求微应用需要导出生命周期钩子函数（见下图）。 ?...micro-app 注册微应用 在创建好了 Vue 微应用后，我们可以开始我们的接入工作了。...__POWERED_BY_QIANKUN__) { // 动态设置 webpack publicPath，防止资源加载出错 // eslint-disable-next-line no-undef...__POWERED_BY_QIANKUN__) { // 动态设置 webpack publicPath，防止资源加载出错 // eslint-disable-next-line no-undef
'8 + 9 = ', comObj.add(8, 9)); }catch(e){ console.log(e); } 另外，如果在页面中对同一模块进行多次导入，则该模块只会在第一次导入时执行...3.2 值拷贝和动态映射 在导入一个模块时，对于CommonJS来说获取的是一份导出值的拷贝；而在ES6 Module中则是值的动态映射，并且这个映射是只读的。...中的count是对commonJS_exports.js中count的一份值拷贝，因此在调用函数时，虽然更改了原本calculator.js中count的值，但是并不会对PageModule.vue中导入时创建的副本造成影响..."3qiv": function(module, exports, __webpack_require__){ //PageModule.vue 内容 },...接下来我们看看一个bundle是如何在浏览器中执行的： 在最外层的匿名函数中会初始化浏览器执行环境，包括定义installedModules对象、__webpack_require__函数等，为模块的加载和执行做一些准备工作
浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用 UI 不同步，DOM 结构不共享 全局上下文完全隔离，内存变量不共享。...以上基本能满足我们的要求。 webpack Module Federation webpack 5 的支持的特性。 单页应用的每个页面都是在单独的构建中从容器暴露出来的。...优点： 能够共享常用库（我们的项目比较特殊，主框架分别为 Vue 和 React，所以能共享的更多的是一些 moment.js / lodash / axios 这类工具库） 缺点： 需要使用 webpack...micro-app是京东零售推出的一款微前端框架，它基于类WebComponent进行渲染，从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。...__POWERED_BY_QIANKUN__ && process.env.NODE_ENV === 'development') { // 动态设置 webpack publicPath，防止资源加载出错
$set 原理 深拷贝如何解决循环引用 http 缓存头部字段 vue 和 react 的区别 讲讲前端路由 一道查找路径的场景题 一道如何优雅处理异步的场景题 webpack 工作流 webpack...复习笔记 CSS 思维导图笔记 ? Javascript 思维导图笔记 ? ECM+ ?...当时也没有底，就去试试了，然后顺便面基了在涂鸦工作的同事 一面 自我介绍还是介绍自己熟悉 vue，但是还是 ?...域名切片 为什么 vue 或者 react 要求 key 值唯一 二面 二面是杭州那边的面试官视频面的，问了 15 分钟左右，是最快的一次面试 平时怎么学习的 MVVM 实现 data 里面为什么是函数...一面 一面是笔试题 内联元素与块级元素 数组 api 介绍 dom 操作有哪些 api 数组去重有哪几种方式 变量提升问题 柯里化问题 数字转金额的问题 手写防抖和节流 判断变量的几种方式，有哪些不同 动态规划算法题
5、代码压缩 UglifyJS: vue-cli 默认使用的压缩代码方式，它使用的是单线程压缩代码，打包时间较慢 ParallelUglifyPlugin: 开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成...sourceMap: true, parallel: true }), new ParallelUglifyPlugin({ //缓存压缩后的结果，下次遇到一样的输入时直接从缓存中获取压缩后的结果并返回...Node.js 之上的 Webpack 是单线程模型的，所以 Webpack 需要处理的事情需要一件一件的做，不能多件事一起做。...HappyPack 对 file-loader、url-loader 支持的不友好，所以不建议对该 loader 使用。...id=vue'] } ] } 3、在生产环境 webpack.prod.conf.js 文件进行配置 const HappyPack = require('happypack') // 构造出共享进程池
本文主要总结了笔者在多年前端工作中的技术方案选型，结合各种不同类型的项目，搭建了一套完整的前端集成解决方案，主要包含如下内容： 于vue-cli3搭建的vue+vue-router+vuex+elementUI...:MrXujiang/vue_muti_cli.git elif [ $name == 'react' ] then git clone git@github.com:MrXujiang/webpack3...基于webpack3打包单页多页应用 地址：https://github.com/MrXujiang/webpack3_reac gulp4打包多页面应用 地址：https://github.com.../MrXujiang/gulp4_multi_pages 更多推荐 如何用不到200行代码写一款属于自己的js类库) 让你瞬间提高工作效率的常用js函数汇总(持续更新) 一张图教你快速玩转vue-cli3...高级进阶系列——用typescript玩转vue和vuex 回复 学习路径，将获取笔者多年从业经验的前端学习路径的思维导图 趣谈前端 Vue、React、小程序、Node 前端 算法|性能|架构|安全
vue版本 2.6.11 脚手架vue/cli版本 4.5.0 优化方向 减少代码量（取消生产sourcemap）、 合并压缩代码（gzip）、 公共代码提取 优化前后对比： 0.jpg // 公共设置...去掉console 2.1 下载安装插件 cnpm install uglifyjs-webpack-plugin --save-dev 2.2 在vue.config.js中配置： const IS_PROD...-D 在package.json中 "compression-webpack-plugin": "^5.0.0", 3.2 在vue.config.js中配置 const CompressionWebpackPlugin...sourceMap 设置 生产环境设置为false，不产生sourceMap module.exports = { productionSourceMap: !...IS_PROD, // 开启 CSS source maps //此项设置为false会影响element-ui引入时样式失效 // requireModuleExtension: false
多团队协作容易不规范。包含通用模块的npm包作为共享资产，“每个人”拥有它，但在实践中，这通常意味着没有人拥有它。它很快就会充满杂乱的风格不一致的代码，没有明确的约定或技术愿景。...如果是多团队统一使用了react技术栈，可能对微前端方案的跨技术栈使用并没有要求；如果是多团队同时使用了react和vue技术栈，可能就对微前端的跨技术栈要求比较高。...= { // entry 入口，output出口，module模块，plugins 插件 mode工作模式，devServer开发服务器 // mode 工作模式 mode.../src/index.html' }), // 实例化模块联邦插件 new Mfp({ // 对外提供的打包后的文件名，引入时使用...localhost:3001/myuser.js" } }) ], 在组件中使用 // const xx = React.lazy(()=>import("导入时模块别名
从本质上来看，gulp是一个真正意义上的**自动化构建工**具，而webpack只是一个**模块化打包工具**。 gulp是通过一系列的工作流去完成这些任务，类似于流水作业。...如果后续有脚本的需求，我们会考虑同时引入gulp，将脚本的工作交给gulp，而webpack仍主负责模块打包。 3....本项目中动态请求统一放在/api下。 我们在配置开发代理的时候，遇到静态资源请求，重定向到本地开发环境上，而遇到动态请求，则直连。...，即util里同个模块可能会被多次打包到不同的chunk中，这是我们不希望看到的。...接着，我们在根目录进行构建： ``` npm run build ``` 以下是externals的工作原理，以`Vue`框架为例： ``` dist/static/js/app.js // 引入Vue
我司有一个工作台搭建产品，允许通过拖拽小部件的方式来搭建一个工作台页面，平台内置了一些常用小部件，另外也允许自行开发小部件上传使用，本文会从实践的角度来介绍其实现原理。...ps.本文项目使用Vue CLI创建，所用的Vue版本为2.6.11，webpack版本为4.46.0。...打包小部件 假设我们的小部件已经开发完成了，那么接下来我们需要进行打包，把Vue单文件编译成js文件，打包使用的是webpack，首先创建一个webpack配置文件： webpack的常用配置项为：entry...less文件的loader即可： npm i less less-loader -D 不同版本的less-loader对webpack的版本也有要求，如果安装出错了可以指定安装支持当前webpack版本的...指定的，另一个是用来清空输出目录的： npm i clean-webpack-plugin -D 修改配置文件如下： const { VueLoaderPlugin } = require('vue-loader
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
