专栏首页京程一灯精通webpack的5大关键点

精通webpack的5大关键点

京程一灯

webpack 是一个现代 JavaScript 应用程序的静态模块打包器,是目前最流行的打包神器。

什么是webpack?

webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

构建就是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码,包括如下内容。

  • 代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
  • 文件优化:压缩 JavaScript、CSS、HTML 代码,压缩合并图片等。
  • 代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
  • 模块合并:在采用模块化的项目里会有很多个模块和文件,需要构建功能把模块分类合并成一个文件。
  • 自动刷新:监听本地源代码的变化,自动重新构建、刷新浏览器。
  • 代码校验:在代码被提交到仓库前需要校验代码是否符合规范,以及单元测试是否通过。
  • 自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统。

构建其实是工程化、自动化思想在前端开发中的体现,把一系列流程用代码去实现,让代码自动化地执行这一系列复杂的流程。 构建给前端开发注入了更大的活力,解放了我们的生产力。

为什么你需要精通webpack?

webpack 是一个 JS 代码模块化的打包工具,藉由它强大的扩展能力及万物皆模块的概念,随着社区的发展,逐渐成为一个前端构建工具小王子,是目前最流行的打包神器。作为前端工程师,精通webpack至少可以让你的工资3000~5000元!是前端工程是必学的打包工具~

而我的webpack专题课上线一小时就突破100人购买。

我是谁?

我是志佳老师

曾就职于 百度LBS搜索研发部 腾讯MIG地图平台部

深度实践过 FIS1、2、3

经历过 Webpack 1、2、3、4 变迁

我将如何带你从0到1 精通webpack?

我的webpack教程是基于 4.x 版本,从配置到源码 深研webpack,让你可以游刃有余的配置自己的工程化环境,并深度理解webpack的整体运作流程。适合有一定前端开发经验的同学。

【webpack专题课】是5次直播大课,如果你不小心错过了直播,可以随时看回放。我将通过先点、后线、再面的方式帮你占领wepack每一个重要的阵地,并提前带你熟知使用webpack过程中会遇到的坑。

如果你报名了我的webpack专题课,我希望你能认真学完,因为它不仅仅能缓解你的知识焦虑,更重要的是让你学会实操技能,并运用到工作当中,相信你一定会成为下一个精通webpack的前端工程师。

你将学到:

基于 4.x 版本,从配置到源码 深研webpack。

  • 使用webpack快速构建SPA应用
  • 使用webpack快速构建多页应用
  • webpack在一线开发中的优化
  • webpack核心源码分析原理课
  • 手把手带你从头实现webpack

本文分享自微信公众号 - 京程一灯(jingchengyideng)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-09-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue-cli3项目创建-配置-发布

    (2) 修改user module -- src/store/module/user.js

    RtyXmd
  • 分布式阿波罗Apollo配置中心

    为什么要使用apollo,在我们开发分布式微服务项目的时候,那些配置一旦变更,就需要重启服务,这样非常不友好。因此我们考虑动态更改配置文件当中的配置,所以把那些...

    编程软文
  • 快速入门Vue

    刚进公司做的第一个项目,刚好前端人手不足,需要我们后端同时兼顾前后端的工作,采用的iview UI框架,基于vue.js。

    KEN DO EVERTHING
  • editormd实现文章详情页面预览

    继之前博客写了editmd.js(国内开源的一款前端Markdown框架)实现的写文章功能之后,本博客介绍使用editormd实现文章预览功能

    用户1208223
  • mpvue网络接口请求封装

    在mpvue中我们同样使用小程序的原生API wx.request进行请求,具体方法如下:

    honey缘木鱼
  • 认识Set和Map数据结构

    tips : 由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致,而entries方法返回的...

    JianLiang
  • js通过input框输入属性和值,改变div的属性

    js实现在input框里面输入属性和值,页面的 div的属性根据输入的属性和值进行变化。

    祈澈菇凉
  • 聊聊flink的Execution Plan Visualization

    本文主要研究一下flink的Execution Plan Visualization

    codecraft
  • 2019开发者调查趋势与方向报告出炉

    近日国外开发者平台 HankerRank 发布了 2019 年开发者技能调查报告,该报告根据对71,281位开发者的调查得出。作者从中选取了一部分,给大家解读一...

    Rookie
  • 网络通信

    1.他是一个网络通信的工具,调用操作系统内核 创建的时候,可以选择tcp通讯,“三次握手,四次挥手”,也可以选择udp通信,一次通信

    DC童生

扫码关注云+社区

领取腾讯云代金券