WebPack打包流程「详细!!!」

本文详细介绍了Webpack的工作原理,包括打包、转换和优化功能。重点讲解了Webpack的配置,如entry、output、module、plugin,以及devServer、watch等选项。此外,还讨论了Webpack的性能优化技巧,如通过CommonsChunkPlugin拆分第三方库,利用externals引用CDN,使用url-loader优化小图片,以及压缩CSS、JS和HTML的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。在3.0出现后,Webpack还肩负起了优化项目的责任。

这段话有三个重点:

打包:可以把多个Javascript文件打包成一个文件,减少服务器压力和下载带宽。

转换:把拓展语言转换成为普通的JavaScript,让浏览器顺利运行。

优化:前端变的越来越复杂后,性能也会遇到问题,而WebPack也开始肩负起了优化和提升性能的责任

1、webpack的基本配置

1.1、entry(项目入口,打包的入口文件,一个字符串或者一个对象):entry:"./src/index.js"

1.2、output(出口文件,配置打包的结果,一个对象):

output:{
  filename: "build.js"
}
1.3、module(模块的处理):loader的配置主要在module.rules中进行,例如:

module: {
  rules:[{
    test: /(\.jsx|\.js)/,  //表示匹配规则,是一个正则表达式
    use:{        //表示针对匹配文件将使用处理的loader
      loader: "babel-loader",  
      options: {
        presets: ["es2015", "react"]
      }
    }
  }]
}


1.4

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值