webpack干嘛的?:

 模块打包机,分析目录结构,找到js模块(包括浏览器不能直接识别的代码 typscript sass...),打包成合适的格式供浏览器访问

webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。 webpack 的核心是 依赖分析,把依赖分析出来了,其他都是细枝末节了

模块打包 构建(项目)

打包的优势(webpack的优势):

1 、模块化,拆分了业务复杂的js代码--》细小的文件
    2、 js拓展---》 基于原型面向对象---》基于class(typescript , es6)-->浏览器识别

webpack与gulp的区别:

1、webpack支持模块化,建有优化的流程。

2、webpack具有缓存机制。

webpack的工作原理

简单的说就是分析代码,找到“require”、“exports”、“define”等关键词,并替换成对应模块的引用。

在一个配置文件中,指明对某些文件进行编译、压缩、组合等任务。把你的项目当成一个整体,通过一个给定的主文件(index.js),webpack将从这个文件开始找到你的项目的所有的依赖文件,使用loaders处理他们,最后打包为一个浏览器可以识别的js文件。

webpack安装

npm install webpack

09 webpack的介绍的更多相关文章

  1. Java 集合系列 09 HashMap详细介绍(源码解析)和使用示例

    java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...

  2. webpack详细介绍以及配置文件属性!

    1.webpack简单介绍 (1)webpack是一个用于实现前端模块化开发工具,可帮助我们自动打包编译成浏览器能够识别的代码 :同时支持commonjs规范 以及es6的import规范: 同时具备 ...

  3. webpack的介绍

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA5EAAAGpCAIAAACbBiUBAAAgAElEQVR4Aey9CVwb553/L04JcSPuw5

  4. [webpack] webpack-dev-server介绍及配置

    webpack-dev-server是webpack官方提供的一个小型Express服务器.使用它可以为webpack打包生成的资源文件提供web服务.webpack-dev-server官方文档 w ...

  5. webpack初步介绍

    我们通过npm -g可以安装一个webpack的东西. npm -g叫做全局安装,通常是安装CLI程序(commond line interface). 我们只用过一次,装了cnpm.此时就能在CMD ...

  6. iOS开发多线程篇 09 —NSOperation简单介绍

    iOS开发多线程篇—NSOperation简单介绍 一.NSOperation简介 1.简单说明 NSOperation的作⽤:配合使用NSOperation和NSOperationQueue也能实现 ...

  7. webpack基本介绍及使用

    1.什么是webpack webpack是一个前端资源加载/打包工具.它根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 官网地址:https://www.webpac ...

  8. 1、webpack课程介绍

  9. Webpack从入门到上线

    webpack是目前一个很热门的前端打包工具,官网说得很清楚,webpack的出现就是要把requirejs干掉.同时它还提供了十分便利的本地开发的环境.网上并不容易找到一个讲解得比较详细完整的教程, ...

随机推荐

  1. Java开发笔记(一百零六)Fork+Join框架实现分而治之

    前面依次介绍了普通线程池和定时器线程池的用法,这两种线程池有个共同点,就是线程池的内部线程之间并无什么关联,然而某些情况下的各线程间存在着前因后果关系.譬如人口普查工作,大家都知道我国总人口为14亿左 ...

  2. Java开发笔记(一百二十二)AWT选择框

    前面介绍了两种文本输入框的用法,不过实际应用很少需要用户亲自文字,而是在界面上列出几个选项,让用户勾勾点点完成选择,这样既方便也不容易弄错.依据选择的唯一性,可将选项控件分为两类:一类是在方框中打勾的 ...

  3. PHP生成随机单词

    class GenRandWords { private static $_alphas = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', ' ...

  4. 关于django操作orm的一些事--反向生成orm、连接多个数据库

    1. django反向生成orm的类代码 使用命令python manage.py inspectdb > app01/models.py,注意,我这里的app01是app的名字. 2.djan ...

  5. 在 WPF 程序中应用 Windows 10 真?亚克力效果

    原文:在 WPF 程序中应用 Windows 10 真?亚克力效果 从 Windows 10 (1803) 开始,Win32 应用也可以有 API 来实现原生的亚克力效果了.不过相比于 UWP 来说, ...

  6. spring-boot-starter-parent的主要作用

    SpringBoot项目一般都会配置starter-parent依赖. 示例: <parent> <groupId>org.springframework.boot</g ...

  7. C#连接数据库不安装Oracle客户端

    Oracle提供了这样的Oracle.ManagedDataAccess.dll,让用可以需要安装Oracle客户端即可连接数据库,并且不区分32位和64位. 1.引用 选择引用,找到对应文件目录下的 ...

  8. Java Web 深入分析(11) JVM 体系结构与工作方式

    jvm体系 jvm简介 java virtual machine jvm体系详解 jvm工作机制 虚拟机怎么执行代码 jvm为何基于栈 执行引擎 执行引擎过程 java调用栈 总结

  9. 删除注册在Eureka的服务(无效,多余)

    例子:http://140.143.67.146:8000/eureka/eureka/apps/ZKR-PRODUCT/172.21.0.10:zkr-product:6868 Request Me ...

  10. 机器码-字节码-CLR-JIT-托管代码-非托管代码-unsafe-GC-fixed

    0. 机器码 直接由机器码对应平台的CPU执行的指令集, 因此无法在其他指令集的CPU上运行. 无法跨平台. 由本地代码编译得到. (托管代码通过JIT生成) 1. 字节码 即 bytecode 是一 ...