大多数开发者对于 Webpack 也许仅仅停留在使用配置层面，仅能够熟练应用 Webpack 各种配置选项在真实项目中。
最近博客上线,但是在首次加载的时候,需要消耗很多时间,大概在50秒左右,就是说第一页登录页面,就需要用户等待50秒(服务器是最低配置也是一个原因),看了一下network,发现有两个文件加载的时间特别长,一个是vendor.js,一个是app.js,打包的时候,这两个文件也提示文件过大
为另一个项目提供可嵌入的功能单页，大部分页面使用时都是独立功能页，个别页面带有左侧边栏（相当于3-4个页面的整合形态），由于资源定位地址的限定，每个页面打包为单页后，入口html文件需要定制命名，且脚本和样式文件需要放在指定的路径下，公共资源地址也必须替换成特殊字符以适配母系统的调用逻辑（比如下面结构中应用jquery.min.js的路径可能是{{publicRoot}}/{{publicLib}}/jquery.minjs）。假设原工程中拥有AB这2个旧页面，现在需要开发CDE这3个页面，目录结构要求如下：
今天的投稿人是鹅厂的Casta Mo 这里附上他的github链接... https://github.com/CastaMo 欢迎留言、转发！ 1. 项目背景 我们前端团队近期在为腾讯云DSA业务搭建内部运营运维系统【简称YY-DSA】，既然是内部系统，我们就可以“为所欲为”地选技术栈，搭框架，但要遵循以下约定： - 项目架构清晰，各个模块各司其职、互不耦合或者尽可能降低耦合度。 - 在确保架构稳定的前提下，尽可能提升整体的效率，包括应用程序的效率以及研发流程的效率，而牺牲流程效率来换取程序效率
本脚手架并且适当简化了一些功能（删除了测试库） 并引入了外部mock和axios两个常用库可以灵活配置。 这里写一下说明文件和心得体会 配置功能 最基本的功能为webpack3+Vue2的基础上引入了外部组件库elementUI 其实也可以灵活修改为别的，css的支持仅引入了less和sass，相信这两者用的人也是最多的。还有一点是针对多页面也引入了vue-router, 也就是说这个多页面仓库也可以当单页面来搞起。 加入的axios库是本地业务所需，这个可以在生成脚手架时不选择，但这个作为Vue的推荐库，
原理：将 webpack中entry配置的相关入口chunk 和 extract-text-webpack-plugin抽取的css样式 插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个html文件，具体插入方式是将样式link插入到head元素中，script插入到head或者body中。
自从webpack4以后，官方帮我们集成了很多特性，比如在生产模式下代码压缩自动开启等，这篇文章我们一起来探讨一下webpack给我们提供的高级特性助力开发。
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
2、 修改build/webpack.base.conf.js文件，通过externals选项加载外部扩展，引入依赖库，不需要webpack处理
很久没有写文章了，今天心血来潮，就写一下之前总结的关于 webpack 模块的问题。刚好在几个月前遇到过另一个问题，当时也简单看了一下 webpack 和 NodeJS 模块的源码实现：
assetModuleFilename: ‘images/[contenthash].png’ [contenthash]可自动根据hash来生成文件名
(1) 首先 npm install jquery –save (–save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。)
assetModuleFilename: 'images/contenthash.png'
---- webpack 是前端开发者一个跨不过去的编译工具。不过由于他的快速迭代，让很多同学在学一个版本的时候，下一个新版本就发布了，让人感觉非常蛋疼和无奈： “我是谁，我在干嘛，我要做什么？” 不过，如果你已经掌握 webpack 比较老的版本，对于新版本的学习而言，应该只需要 0.5 天的工作量就可以完成。因为，其基本理念都是以 JS 为中心，增加的只是其辅助特性。 webpack 到目前为止已经走过了三个大版本，每个版本之间都，增加了非常多可用的特性，但是每个版本的具体配置项都有些差异，很容易让老版
本篇开始学习webpack打包的构建配置，所用版本为webpack 4.16.1和webpack-cli 3.2.3。
externals和DllPlugin都是为了分离模块诞生，通过他们可以将一些第三方模块抽离出来，打包的时候不需将某些三方库一起打包如vue、vue-router
我们的打包配置有一个基类文件，并根据不同的打包需求，有不同子类文件——完整组件库打包、单个组件打包、打包示例工程。
为什么会有这样一篇文章？因为网上的教程/示例只说了怎么做，没有系统详细的介绍引入这些依赖、为什么要这样配置，甚至有些文章还是错的！迫于技术洁癖，我希望更多的开发小伙伴能够真正的理解一个项目搭建各个方面的细节，做到面对对于工程出现的错误能够做到有把握。
谈及如今欣欣向荣的前端圈，不仅有各类框架百花齐放，如Vue， React， Angular等等，就打包工具而言，发展也是如火如荼，百家争鸣；从早期的王者Browserify, Grunt，到后来赢得宝座的 Gulp， 以及独树一帜的 fis3, 以及下一代打包神器 Rollup ；在 browserify,grunt,gulp,rollup,webpack 可以一窥其中部分对比。在本文要探究的是，当前打包工具绝对霸者 Webpack。 Webpack，当前各大主流框架默认配备的打包方案，对其如何使用，已有较
进行重新加载编译。实际就是将浏览器不认识的语法编译成浏览器认识的语法。比如less编译成css，ES6 语法 转成 ES5等等。
1、需求：封装 utils 包，校验手机号长度和验证码长度，在 src/index.js 中使用并打包观察
●entry : js的入口文件 ●externals :外部依赖的声明 ●output: 目标文件 ●resolve :配置别名 ●module :各种文件，各种loader ●plugins :插件
HI，继 Vue 3 和 React 17 之后，我又来啦！印记中文已经完成了 webpack v5 中文文档的同步及翻译工作，大家可以无缝进行阅读哦。 文档地址请认准：https://webpack.docschina.org 文档地址请认准：https://webpack.docschina.org 文档地址请认准：https://webpack.docschina.org 重要的事说三遍，我们的文档隶属于官方，我们没有其他的域名哦，并且是与官方进行实时同步。 2020 年 10 月 10 日，web
Webpack在前端前端构建工具中可以堪称中流砥柱般的存在，日常业务开发、前端基建工具、高级前端面试...任何场景都会出现它的身影。
再一次，在网上找的不少文章都不合我的需求，很多文章都是只简单介绍了生产环境下配置，没有介绍开发环境下的配置，有的也没有将多入口结合 vue-router、vuex、ElementUI 等进行配置，因此在下通过不断探坑，然后将思路和配置过程记录下来，留给自己作为笔记，同时也分享给大家，希望可以帮助到有同样需求的同学们～
使用 vue-cli@3.x 构建自己的库时，因为又引入了第三方组件，打包后将代码合在了一起显得很大。 所以应当只打包自己的组件，而不打包内部引入组件的代码。（依赖自然会安装）
在去年的这个时候，本骚年还在被Grunt和Gulp以及各种Requirejs、Seajs团团围住攻击，狼狈不堪。后面认识了Webpack之后，基本所有项目框架都拿它来构建了。
再一次，在网上找的不少文章都不合我的需求，很多文章都是只简单介绍了生产环境下配置，没有介绍开发环境下的配置，有的也没有将多入口结合 vue-router、 vuex、 ElementUI 等进行配置，因此在下通过不断探坑，然后将思路和配置过程记录下来，留给自己作为笔记，同时也分享给大家，希望可以帮助到有同样需求的同学们～
webpack是如何打包资源优化，你有了解吗？或者一个经常被问的面试题，首屏加载如何优化，其实无非就是从http请求、文件资源、图片加载、路由懒加载、预请求，缓存这些方向来优化，通常在使用脚手架中，成熟的脚手架已经给你做了最大的优化，比如压缩资源，代码的tree shaking等。
最近在做项目的时候遇到了一个场景：一个项目有多个入口，不同的入口，路由、组件、资源等有重叠部分，也有各自不同的部分。由于不同入口下的路由页面有一些是重复的，因此我考虑使用 Webpack 多入口配置来解决这个需求。
前言：webpack4从入门到高阶配置，本文先讲述webpack4的安装、基础配置、进阶配置，高阶配置放置下篇讲述。
如何构建一个libray库？构建完后怎么发布到npm让大家都可以用到？为什么要构建发布一个自己的函数库？本章就是想谈下这些问题。 webpack从0到1 panda-utils 1、缘起 为什么要用webpack写一个自己的函数库？因为有一些工具函数平常是用的比较多，每次起一个新的项目都要用到，同样的工具函数老是去找很麻烦，维护一份自己的函数库，能快速的找到api（毕竟自己写的）且更高效的开发业务，何乐而不为？ 虽然市场有很多牛逼的库比如loadsh、underscore.js等等，公司也有公共的
这是之前在公司oa项目优化时罗列的优化点，基本都已经完成，当时花了点心思整理的，保存在这里，方便以后其他项目用到查漏补缺。 1、打包文件中的app.js文件放入cdn，加快页面首次加载速度 2、提取公共方法，减少js代码量 3、提取公共组件，将统计分析的售前和售后，客户分配，客户管理，客服管理等页面的搜索条件模块化，减少了html代码量，减少了每个页面中都有的重复方法。 4、vue-router路由全部改成懒加载路由，该页面被点开时才加载该页面.vue组件，提高首页加载速度。 5、根据页面复杂度，删除
2、在src/index.html入口文件中通过script引用需要使用的js（参见以下第8-10行代码）
Webpack 已经流行好久了，但很多同学使用 webpack 时还是一头雾水，一下看到那么多文档、各种配置、各种 loader、plugin 立马就晕头转向了。我也不例外，以至于很长一段时间对webpack都是一知半解的状态。但是想要继续做好前端，webpack 是必须得跨过的一道坎，其实掌握 webpack 并不难，只是我们没有找到正确的方法。本文就是我自己在学习 webpack 时的一点心得体会，供大家参考。
Webpack已经流行好久了，但很多同学使用webpack时还是一头雾水，一下看到那么多文档、各种配置、各种loader、plugin立马就晕头转向了。我也不例外，以至于很长一段时间对webpack都是一知半解的状态。但是想要继续做好前端，webpack是必须得跨过的一道坎，其实掌握webpack并不难，只是我们没有找到正确的方法。本文就是我自己在学习webpack时的一点心得体会，供大家参考。
最近开始想要维护一个个人的公众号，初心是为了督促自己坚持做笔记，将学习的东西整理记录下来。更进一步的要求是提升动手能力、文章写作能力，和分享经验。终极目标就是为了维护一个个人的品牌形象，像提到@阮一峰、@张鑫旭、@情封、@justjavac 等等业内知名的IT技术人员一样，然后用自己的品牌形象获取一些合法的经济利益，用来改善生活。毕竟努力学习、认真工作，说到底还是为了更好的生活。
视频地址：https://www.bilibili.com/video/BV1YU4y1g745
最近和部门老大，一起在研究团队【EFT - 前端新手村】的建设，目的在于：帮助新人快速了解和融入公司团队，帮助零基础新人学习和入门前端开发并且达到公司业务开发水平。
一、简介 1、什么是webpack webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。 我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情，这块我们后续会提到。 你可以不打算将其用在你的项目上，但没有理由不去掌握它，因为以近期
压缩项目打包后的体积大小、提升打包速度，是前端性能优化中非常重要的环节，笔者结合工作中的实践总结，梳理出一些 常规且有效 的性能优化建议
自从 2018 年 2 月，webpack4 发布以来，webpack 就暂时没有更进一步的重大更新，为了保持 API 的一致性，旧的架构没有做太多改变，遗留了很多的包袱。阔别 2 年多后，2020 年 10 月 10 日，webpack 5 正式发布，并带来了诸多重大的变更，将会使前端工程师的构建效率与质量大为提升。
Webpack 5 的消息尽管已经出来了许久，但是正式版一直还未发布。Webpack 5 的 ChangeLog 中，除了常规的性能优化、编译提速之外，有一个比较让人期待的功能就是 Module Federation。Module Federation 可以强行翻译成「模块联邦」，但是听起来很是怪异，我在某个前端群也抛出了这个问题，没想到大家的回复也是五花八门。所以，本文就直接用 Module Federation 了，不进行翻译听起来好像更舒服一点。
前段时间系统性学习了webpack，针对于打包项目，webpack的确非常强大，也非常合适，但是用来打包组件库，就显得比较的繁琐。相较而言，使用rollup打包组件库，就显得非常的简单容易，而本文也将介绍它的基础用法。
webpack插件没什么好说的，用过的都知道怎么配置，只是不知道内部怎么执行。今天学一学插件的一些机制，手写一个插件并不难。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
