一个大四学长分享自己的web前端学习路线--webpack篇(2/3)

简介: webpack所谓的拆分的配置就是将webpack分为common(公共配置)、dev(开发环境下的配置)、prod(生产环境下);然后还需要的是在dev当中将它引入我们的common,再在prod当中引入common,这个时候我们要做的就是安装webpack-merge,比如通过这个方法module.export = smart将其导入common的时候对应的配置的命名。

📔  简单了解webpack

  什么是webpack,这里博主博客有一篇文章已经很系统的说明了,这里再简单的简述一下,急速我们前端web开发的话,为了确保代码可以进行维护,我们把代码拆分成了很多的模块,而这些管理模块的就是我们的webpack。

  当然,webpack还提供了摇树、懒加载、代码分割的额外的功能,所以一句话总结,想要更深的区了解前端工程化,代码的背后是别有通洞天的。

一、📃基本配置

1.1✒️学会拆分配置和merge

webpack所谓的拆分的配置就是将webpack分为common(公共配置)、dev(开发环境下的配置)、prod(生产环境下);然后还需要的是在dev当中将它引入我们的common,再在prod当中引入common,这个时候我们要做的就是安装webpack-merge,比如通过这个方法module.export = smart将其导入common的时候对应的配置的命名。

1.2 ✒️学会启动本地服务

 学会启动本地服务的步骤,首先启动是依赖的是webpack-dev-serve,不过,当然了,我们也可以进行定义dev,使用我们的webpack-dev-serve或者定义build使用我们的webpack就不一样的,所以启动的时候要注意区分。

1.3 ✒️学会处理ES6

 学会处理ES6的方法是,首先知道ES6的配置是在common当中的,因为dev和prd都是要用到的,test的作用是检测所有的js文件。我们的loader文件是引入了一个babel=loader,include是需要检测的文件所在的目录。但是我们的exclude是不需要检测的文件的。

 当然了,我们使用babel即使要去配置.babelrc,一般情况下,根据一下的放下配置就好,plugins是配置不在这里面的但是需要使用的,一般还是不需要用的。

1.4 ✒️学会处理样式

  我们处理样式当然也是在common当中,因为开发以及线上都是需要的,第一步是需要我们css-loader对css进行解析,将其解析成我们的css,,因为引入是按js那种的引入的方式才能被webpack认为是js文件,然后再通过style-loader将它插入到页面当中,加上我们的postcss的作用是用来兼容浏览器的。

  当然如使用得postcss配置的话也是需要postcss.config.js,我们在这里引入需要的细分的模块,当然这一些模块也是需要安装的。module.export = {plugins:[require('autoprefixer')}

1.5 ✒️学会处理图片

 学会处理图片的操作是需要分开来写,我们在开发的工程中一般都直接引入图片的地址的,但是这样的方法是对于线上的操作不是很友好的,因为对于那一些小于5KB的图片我们是用base64然后将它打包到img的目录下,因为这样子可以以html标签的方式引入图片是不需要再去请求的,加上图片本身内存不大,请求没有意义。

  像一些开发模式都是直接丢在根目录下面的,这样的操作是不好的,因为一般放html。其实img目录下面的只有比较大的图片,小的图片都以base64写到代码当中。

{test:(.png|.jpg|gif)$/,use:{loader:'url-loader',option:{limit:5*1024,outputPath:'/img1/'}

然后,模块化的话,就是webpack本身就是支持模块化的,只不过还需要的是引入webpack,不然的话有一些模块就是识别不了。

二、📃高级配置

2.1 ✒️学会配置多个入口

 我们的js文件是在common里面要写入多个entry,因为是要多个页面嘛,然后就是修稿生产环境下的output,那就不要就是直接写死名字,而是应该使用变量,这个可以根据entry里面的命名自动配置的。

entry:{index:path.join(srcPath,'index.js').
other:path.join(srcPath,'other/js')}

  html的话需要在common当中进行配置,针对每一个入口都要在new一个新的webpack的实例,分别对应的是html文件,并且chunks标注需要引入的js文件就好了,不写的话,就直接全部引入。

newHtmlWebpackPlugin({template:path.join(srcPath,'index.html'],filename:'index',chunks:['index']}

2.2 ✒️学会抽离压缩CSS

 存在问题:CSS一般来说,应该是作为外部链接引入的,而不是直接在style直接出现的。目前的实现是是在打包中将一些CSS代码经过js塞入html,效率比较低,所以应该抽离。

解决方法:安装引入mini-css-extract-plugin、terser-webpack-plugin、optimize-css-aesets-webpack插件,然后进行配置,需要注意的是抽离less,less最后变成css,关键在与使用插件loader而不再是style-loader。

2.3 ✒️学会抽离公共代码和第三方代码

存在问题:我们在之前多个文件都是要引入sum,如此打包的话我们的各个文件都会把sum给打包进来,应该的是单独的抽离出来然后项目引用比较好。另一情况就是我们引入第三方模块的话,而且每次修改的话,只要稍微改一改一点点的业务代码就可以了。但是第三方模块里面,会导致第三方模块也会跟着重新加载,如果可以吧第三方模块拆出来就会命中缓存加载快一些。

 解决方法:改动的部分是在生产环境,chunk是一段代码,一般写all就可以了,既然是拆分就需要起名字,所以就要给不同的name,priority代表的是权重,考虑如果是模块之间有相互作用的情况是参考哪一个模块的规则test是路径,第三方模块是属于在这个路径下面的命中了被划分到vendor模块当中,当然如果是包比较小的是我们就直接复制到每一个文件夹,不去拆分;minChunks是引用了多少次就要开始划分模块。

splitChunks:{chunks:all,cacheGroup:{name:'vendor',priority:1,test:/node_modules/,minsize:0,minChunks:1},
common:{{同样配置不同参数}}

2.4 ✒️学会异步加载JS

我们文件较大的时候,需要异步加载的话就不能直接import,而是import路径,通过我们的then去拿到资源res,这个是webpack默认支持的语法,不需要我们做什么配置。

import{ './index.js'} .then((res)=>{具体操作})

注意的是,异步加载的话也会生成一个chunk,与其他的chunk在同一个目录下面。 

2.5 ✒️学会处理Vue和jsx

如果是处理jsx可以安装@babel、preset-react,然后再.baberlrc给安排上就可以了。至于vue就直接安装vue-loader然后配置rules就可以了。loader:['vue-loader'],至于是vue的话,那我们就直接安装vue-loader然后再进行配置rules就好了.

2.6 ✒️学会区分module chunk bundle三个区别

  1. module是各个源码文件,webpack一切都是模块;
  2. chunk多个模块合成,比如entry、import、splitChunk;
  3. bundle是最终输出文件的意思;
  4. 注意:html不是模块,是输出的东西,而一切的都是可以应用的都是模块。最后输出的文件可以不只有一个。

三、📃webpack优化打包构建速度-开发体验和效率

3.1 ✒️学会处理多进程--happypack

为什么要学会这个呢?因为我们的js是单线程的,开启多进程的话打包为了提高构建的速度。我们具体实现的方法是:安装happypack然后早prod生产环境下使用,需要重新配置rules中的babel。

use:['happypack/loader?id=babel']
new HappyPack ({id:'babel',loaders:['babel-loader?cacheDirectory']})
//这里的ID是对应我们接下来在plugin中实例化的happypack实例

3.2 ✒️学会处理多进程--ParelleUglifyPlugin

学习的原因是webpack内置的工具Uglify压缩我们的js、但是js是单线程的,开启多进行压缩就会更加得快。

我们具体的实现的方法是:依然是安装webpack-paraller-uglify-plugin插件,直接在plugin当中去new一下我们的实例就可以了。项目大的时候,打包起来会比较慢,可以开启多进程提高速度,项目小的时候打包较快,开启多进程的话会降低速度,所以根据自己的需求进行选择。

//使用我们的ParallelUlifyPlugin  并行压缩输出我们的js代码
new ParallelUlifyPlugin({
//传递给Ulify参数
UlifyJS:{
output:{
     beautify:false,//最紧凑的输出
     comments:false,//删除所有的注释
},
compress:{
//删除所有的console语句,可以兼用IE浏览器
dorp_console:true,
//内嵌定义但是只用到一次这个变量
collapse_vars:true,
//提取出来的出现多次但是没有定义成变量去应用的静态值
reduce_vars:true,
}
}
})

3.3 ✒️了解什么是热更新

定义是:新代码生效,网页不刷新,状态不丢失。

我们实现的方法是:热更新是在我们的dev环境下进行的,直接插入插件webpack/lib/HotModulePeplacementPlugin,我们的入口文件的话就不能再直接写文件的路径,网站需要对应自己的网站地址。插件的使用也就是直接在plugin中直接new一下就还了1,然后再devserve中写上hot属性为TRUE就好了。

//第一点:插入插件
index:[
    'webpack-dev-server/client?http://localhost:8080/',
    'webpack/hot/dev-serveer',
path.join(srcPath,'index.js')
],
//第二点:devServer
devServer:{
   prot:87080,      // 显示打包的进度条
   progress: distPath, //目录
   open: true,//自动打开浏览器
compress:true,//启动压缩
hot:true,
}
//第三点:增加,开启热更新之后的代码逻辑
if (module.hot) {
module.hot.accept(['.math'],()=>){
   const sumRes = sum(10,30)
console.log('sumRes in hot',sumRes)
}
}

3.4 ✒️了解什么是自动更新

定义:在开发环境下我们其实只需要配置devserver就会开启自动更新,线上没有自动刷新的说法。自动刷新的意思是保存代码就会页面刷新。问题是会导致状态的丢失和路由的丢失而由于我们整个页面的刷新速度比较慢,状态的丢失就是比如填好的一些数据没有了,网页已经点了比较深的地方会退回到首页。

module.export = {
   watch: true,//开启监听,默认为FALSE
//注意的是,开启监听后,会自动刷新浏览器
//监听配置
watchOptions: {
  ignored: /node_modules/,
//监听到变化发生后会等到300ms再去执行动作,房子文件更新太大导致重新编译评率大
aggregateTimeout:300,//默认速度
poll:1000  //默认meige11000毫秒询问一次
}
}

3.5 ✒️了解怎么优化babel-loader

我们在引入loader的时候加上cacheDirectory,可以让没有修改的部分不在重新编译,也就是缓存了。use:['babel-loader?cacheDirectory'],我们明确的范围是,exclude和include选择一个就好了,include:path.resolve(_dirname,src)

3.6 ✒️了解什么是lgnorePlugin和noPase

这个部分只需要了解就好了,gnorePlugin主要是为了避免一些模块的引入,而noPase避免的是引入的时候打包一些东西。

注意:以上出来自动更新、热更新是考虑开发更加流畅不能用于生产环境,其他都可以用!

四、📃webpack优化产出代码--产品性能

4.1 ✒️学会处理bundle+hash

bundle+hash,内容改变了hash也会跟着改变,缓存就会失效,这个时候再去重新请求,不然就会命中缓存,加载得快一点,不需要重新加载一次。

4.2 ✒️学会处理懒加载

这个人简单,只需要通过import函数去加载我们的内容就可以了!

4.3 ✒️学会处理提前公共代码

提取公共代码和第三方模块,我们不需要在多个入口打包这些重复的模块而是作为一个工包相互引用。

//缓存分组
cacheGround:{
  //第三方模块
  vemdor: {
     name:'vebdor',  //chunk名称
     priority:1,//权限更高,优先抽离
     test:node_modules/,
     minsize:0,//大小限制
     minChunks: 1 //最少服用过几次
}
//公共的模块
common:{
     name:'common',  //chunk名称
     priority:0,//权限更高,优先抽离
     minsize:0,//大小限制
     minChunks: 2 //最少服用过几次
}
}

4.4 ✒️学会处理使用CDN加速

实现的方法:第一步是在加上publicSrc让链接丢变成CDN;第二步就是将链接都上传到CDN服务,让链接可用,那么结果打包出来的html引入链接都是加入了cdn的。

output:{
  //打包代码的时候,加上hash
filename:'[name].[contentHash:8].js'//name就是多个入口时的entry
path:distPath,
publicPath:'http://cdn.abc.com'  //修改所有静态文件url的前缀
}

4.5 ✒️学会使用production

定义:自动开启代码压缩、vue和react等会自动删除调试代码、启动Tree-shaking.

实现的方法:mode:'product'就是使用了production环境。开发环境下我们引入了一些模块,模块中如果没有使用到的函数之类的耶还是会被引入的,这个开发环境下没事,但是线上希望没有用到的就不要出现了,其实只需要开启production,打包就会实现Tree-Shaking。

注意的是:ES6 module才能让tree-shaking生效,commomjs是不行的。

4.6 ✒️了解Scope Hosting

问题:我们开发的时候是分文件的,打包后第一个该函数就是main.js,第二个函数就是hello.js;这个的问题是函数越多的话,产生得1作用域就会越多,对于内存的小号和js的执行都会不友好。

我们解决的方法是:开启Scope Hosting把多个函数合并在一个函数当中。

//开启
[
(function (module,_webpack_exports_,_webpack_require_){
  var hello = {'hello'};
console.log(hello);
})
]

我们这样做的好处就是代码体积更小、创建的函数作用域更少、代码可读性好。

const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleCincatenationPlugin')
module.exports = {
   resolve: {
    //计算第三方模块优先采用指向ES6模块化的语法文件
   mainFields:['jsnext:main','browser','main']
  },
plugins:[
//开启Scope Hosting
new ModuleConcatenationPlugin{},
]
}

我们要注意的是条件是引入的第三方模块最好是采用ES6语法写的,也就是mainField当中的优先采用jsnext指向的文件名字。

五、📃babel

5.1 ✒️环境搭建和基本配置

安装插件,配置.babelrc即可。具体babel是怎么转换的主要是通过plugins里面的东西,但是全部都写的话有太多就会有presets这些预设。预设还不满足的话可以在plugins自己再添加。

2345_image_file_copy_35.jpg

2345_image_file_copy_36.jpg

5.2 ✒️babel-runtime

问题:目前使用babel-profill的话会存在污染全局环境的问题,如果是做一个独立的web系统无碍,但是如果是做一个第三方的lib则不行。

污染全局变量的意思是引入的文件都是直接去window或者对象或者数组的原型上添加或者重新定义方法。如果作为第三方库被使用的话很可能出现覆盖冲突等.

解决:那么就需要使用babel-runtime来给方法换名字加前缀什么的,安装@babelrc/runtime、@babelplugin-transform-runtime,

回到.babelc作以下配置,这个是官方的配置(默认配就行,无需管具休意思),基本意思就是启动runtime,定义版本啊,启动generator、启用ES6的模块化啊等,运行后发现确实帮我们重新取了个名字(加了下划线)就不会污染全局变量了。

目录
打赏
0
0
0
0
63
分享
相关文章
|
8天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
68 6
2022年前端学习路线(个人认为)
本文提供了一条前端工程师的学习路径,分为三个阶段。第一阶段(1-2个月)重点掌握HTML、CSS、JavaScript及H5+CSS3,目标是能够构建基本的静态网页。第二阶段(2-3个月)深入Node.js、Git、Webpack及相关工具和规范,提升项目管理和构建能力。第三阶段(4-6个月)专注于Vue、React、Angular等主流框架,以及uni-app和微信小程序的开发,旨在实现跨平台应用的开发能力。每个阶段都有详细的课程推荐,帮助初学者逐步成长为合格的前端工程师。
41 1
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
107 6
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
98 3
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
94 2
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
60 3

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
    90
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    14
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    2
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    44
  • 5
    详解智能编码在前端研发的创新应用
    16
  • 6
    巧用通义灵码,提升前端研发效率
    30
  • 7
    智能编码在前端研发的创新应用
    40
  • 8
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
    23
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    8
  • 10
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
    6
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等