webpack基础

在这里我仅仅的是对webpack做个讲解,webpack这个工具非常强大,解决了我们前端很繁琐的一些工具流程繁琐的事情。如果感兴趣的同学,简易还是看官网吧。

中文链接地址:https://www.webpackjs.com/

为什么要使用webpack?

现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法

  • 模块化,让我们可以把复杂的程序细化为小的文件;
  • 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可以识别;
  • Scss,less等CSS预处理器
  • ...

这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的,这就为WebPack类的工具的出现提供了需求。

什么是webpack

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

官网的一张图,你是否能看明白呢?

中间那个是webpack的图标,可以看作webpack这个工具。左边是我们项目生产环境下所以来的包,通过这个webpack工具我们可以打包所有的图片,所以的脚本,所有的样式等等,最后打包成了右边的静态资源文件。

注意了:每个webpack的版本都有不同的功能,而且高版本的webpack可能会出现意想不到的bug,在这里推荐大家使用2版本的webpack。

另外webpack还支持我们的模块化加载。在之前的学习可没有这个功能哦!这让我们更加快速的开发。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Django之views系统

    Django的View(视图)简介 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应。 响应可以是一张网页...

    人生不如戏
  • MySQL之单表查询

    一、单表查询的语法 SELECT 字段1,字段2... FROM 表名 WHERE 条件 GROUP BY fiel...

    人生不如戏
  • Django处理流程

    用户通过浏览器发送请求 请求到达request中间件,中间件对request请求做预处理或者直接返回response 若未返回response,会...

    人生不如戏
  • Vue学习笔记之Webpack介绍

    在这里我仅仅的是对webpack做个讲解,webpack这个工具非常强大,解决了我们前端很繁琐的一些工具流程繁琐的事情。如果感兴趣的同学,简易还是看官网吧。

    Jetpropelledsnake21
  • 最适合新人的-webpack配置实例(1)

    webpack这东西配置项比较多,讲起来比较琐碎,整个视频大概一个多小时,放在微信公众号上来发的话,基本上不太可能有人会看得完。

    web前端教室
  • webpack 插件机制分析及开发调试

    webpack 插件机制是整个 webpack 工具的骨架,而 webpack 本身也是利用这套插件机制构建出来的。

    winty
  • webpack 4 测试版 —— 现在让我们先一睹为快吧!

    腾讯NEXT学位
  • WEB前端知识体系精简

    Web前端技术由html、css和 javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先...

    Java帮帮
  • webpack3 升级到 webpack4 小记

    团队开发的时候,发现启动项目服务 npm run dev 很慢,我试了一下,要三四十秒,这对于我们开发来讲,会导致开发效率下降很多,而我们目前使用的是 webp...

    GopalFeng
  • jQuery第十五篇 attr

    /* 1.attr(name|pro|key,val|fn) 作用: 获取或者设置属性节点的值 可以传递一个参数, 也可以传递两个参数 如果传递一个参数...

    用户7873631

扫码关注云+社区

领取腾讯云代金券