1、什么是Webpack

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

这段话有三个重点：

  • 打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。
  • 转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。
  • 优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。

2、为什要使用WebPack

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

a:模块化，让我们可以把复杂的程序细化为小的文件;

b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；

c:scss，less等CSS预处理器

webpack初识的更多相关文章

  1. webpack 初识

    Webpack介绍 webpack 官网 http://webpack.github.io/docs/ webpack 中文地址:https://doc.webpack-china.org/ webp ...

  2. Webpack学习-Webpack初识

    一.前言 webpack 到底是个什么东西呢,看了一大堆的文档,没一个能看懂的,因为上来就是给个module.exports 然后列一大堆配置,这个干啥,那个干啥,没一点用.但凡要用一个东西,一个东西 ...

  3. webpack初识！

    最近在使用webpack 感觉棒棒哒 下面这个简单的教程可以让你走入webpack的世界 欢迎使用webpack 这个小教程通过简单的例子来引导大家使用webpack 通过这些这篇文章你可以学到 如何 ...

  4. webpack初识(biaoyansu)

    1.是什么和为什么 在浏览器中的js之间如果需要相互依赖 src=a.js src=b.js src=c.js src=d.js 需要暴露出全局变量,而暴露出的这个全局变量是非常不安全的, 随着Nod ...

  5. 使用webpack loader加载器

    了解webpack请移步webpack初识! 什么是loader loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的 ...

  6. webpack学习（二）初识打包配置

    前言:webpack打包工具让整个项目的不同文件夹相互关联,遵循我们想要的规则.想 .vue文件, .scss文件浏览器并不认识,因此webpage暗中做了很多转译,编译等工作. 事实上,如果我们在没 ...

  7. vue第一单元(初识webpack-webpack的功能-webpack的初步使用)

    第一单元(初识webpack-webpack的功能-webpack的初步使用) #课程目标 了解webpack出现的意义,以及webpack解决的前端问题 掌握webpack的使用流程和步骤 掌握we ...

  8. webpack入门教程之初识loader(二)

    上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么w ...

  9. 初识webpack——webpack四个基础概念

    前面的话 webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.当webpack处理应用程序时,它会递归地构建一个依赖关系图表 ...

随机推荐

  1. 登陆 全站 user

    TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join( ...

  2. spring使用@Value标签读取.properties文件的中文乱码问题的解决

    最近测试某个老系统的时候,启动的时候发@Value注入的中文是乱码,文件使用GBK/UTF-8的时候均会出现乱码问题,但是spring配置文件里面注入的占位符并没有这个问题,bean文件设置了file ...

  3. Nginx：论高并发，在座各位都是渣渣

    NGINX 在网络应用中表现超群,在于其独特的设计.许多网络或应用服务器大都是基于线程或者进程的简单框架,NGINX突出的地方就在于其成熟的事件驱动框架,它能应对现代硬件上成千上万的并发连接. NGI ...

  4. mysql添加Federated引擎问题

    现在我有这么一个需求, 就是有两个项目, 一个叫项目A,一个项目B, 由于A的用户表和B的用户表是要实现一样的. 例如: 我在A项目中注册了,要实现在B项目中也能登录, 当用到B的时候, 由于B数据库 ...

  5. Redhat普通用户如何使用管理员权限

    作为一个普通用户, 很多地方收到权限的控制, 下面展示sudoers大法, 主要就是sudo的问题了. 下面的是我的普通用户lee 还没有授权之前是这样的 开始授权 切换到root用户, 修改sudo ...

  6. rabbitmq install erlang faild

    我安装的时候莫名的出现这2个错误 No Presto metadata available for rabbitmq-erlangwarning: /var/cache/yum/x86_64/7/ra ...

  7. ERROR 3009 (HY000): Column count of mysql.user is wrong. Expected 45, found 42. Created with MySQL 50560, now running 50725. Please use mysql_upgrade to fix this error.

    centos7.5 登入mysql,进行授权报错 问题: mysql> grant all privileges on *.* to 'lvhanzhi'@'%' identified by ' ...

  8. xlrd、xlwt 操作excel表格详解

    转自:https://www.cnblogs.com/jiablogs/p/9141414.html python操作excel主要用到xlrd和xlwt这两个库,即xlrd是读excel,xlwt是 ...

  9. FireMonkey 源码学习（6）

    (6)GetGlyph和GetBaseline TFontGlyphManager是一个抽象类,在不同平台上的实现是不同的,以Windows为例,在FMX.FontGlyphs.Win.pas文件中定 ...

  10. FireMonkey 源码学习（2）

    三.TControl FireMonkey重写了TControl的代码,实现了众多接口,如下图: 基类上实现了众多功能,这里不详细描述. 四.TEdit 编辑框是从TControl—TStyledCo ...