什么是webpack?

现今的网页可以看做是功能丰富的应用,拥有着复杂的js代码和一大堆依赖包。为了简化开发的复杂程度,有了很多好用的实践方法

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

类似于TypeScript这种在js基础上拓展的开发语言,使我们能够实现目前版本的Js不能直接使用的特性,并且可以转换为js文件让浏览器可以识别

less saas等css预编译

但是利用他们开发的文件往往需要进行额外的处理才能让浏览器识别,手动又很麻烦,就出现类似webpack类的工具。

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

WebPack和Grunt以及Gulp相比有什么特性

其实Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,工具之后可以自动替你完成这些任务。

webpack工作方式是:把你的项目当做是一个整体,通过一个给定的主文件,如(index.js),webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理他们,最后打包为一个或者多个浏览器可识别的js文件

【webpack系列】1 What is webpack?的更多相关文章

  1. [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解

    接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...

  2. Vue实战Vue-cli项目构建(Vue+webpack系列之一)

    用Vue比较长一段时间了,大大小小做了一些项目,最近想总结一下知识点,出一个Vue+webpack系列,先从项目构建说起--vue-cli. 由于是Vue+webpack这里就不赘述git那些东西,默 ...

  3. [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

    本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...

  4. Webpack系列-第三篇流程杂记

    系列文章 Webpack系列-第一篇基础杂记 Webpack系列-第二篇插件机制杂记 Webpack系列-第三篇流程杂记 前言 本文章个人理解, 只是为了理清webpack流程, 没有关注内部过多细节 ...

  5. 【webpack系列】从零搭建 webpack4+react 脚手架(一)

    搭建一个React工程的方式有很多,官方也有自己的脚手架,如果你和我一样,喜欢刨根究底,从零开始自己一行一行代码创建一个React脚手架项目,那你就来对地方了.本教程是针对React新手,以及对web ...

  6. 全网最贴心webpack系列教程和配套代码

    webpack-demos:全网最贴心 webpack 系列教程和配套代码 欢迎关注个人技术博客:godbmw.com.每周 1 篇原创技术分享!开源教程(webpack.设计模式).面试刷题(偏前端 ...

  7. [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)

    [js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...

  8. 【webpack 系列】基础篇

    Webpack 基础篇 基本概念 Webpack 是一个现代 JavaScript 应用程序的静态模块打包器.当 webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每 ...

  9. 【webpack 系列】进阶篇

    本文将继续引入更多的 webpack 配置,建议先阅读[webpack 系列]基础篇的内容.如果发现文中有任何错误,请在评论区指正.本文所有代码都可在 github 找到. 打包多页应用 之前我们配置 ...

  10. webpack系列之loader的基本使用

    可以访问 这里 查看更多关于大数据平台建设的原创文章. webpack系列之loader及简单的使用 一. loader有什么用 webpack本身只能打包Javascript文件,对于其他资源例如  ...

随机推荐

  1. Java的各种加密算法

    Java的各种加密算法 JAVA中为我们提供了丰富的加密技术,可以基本的分为单向加密和非对称加密 1.单向加密算法 单向加密算法主要用来验证数据传输的过程中,是否被篡改过. BASE64 严格地说,属 ...

  2. 01: awk常用

    1.1 awk基本使用 1.找出当前登录用户数量 [root@localhost ~]# w 14:09:07 up 48 min, 2 users, load average: 0.00, 0.01 ...

  3. 20165211 2017-2018-2 《Java程序设计》第2周学习总结

    20165211 2017-2018-2 <Java程序设计>第2周学习总结 教材学习内容总结 本周,我学习了书本上二三两章的内容,以下是我整理的主要知识 第二章 基本数据类型与数 标识符 ...

  4. 如何修改bootstrap模态框的backdrop蒙版区域的颜色?

    参考地址: http://www.cnblogs.com/9miao/p/4988196.html 蒙板样式实现: 大家或许注意到了,在做模态弹出窗时,底部常常会有一个透明的黑色蒙层效果:在Boots ...

  5. P2894 [USACO08FEB]酒店Hotel 线段树

    题目大意 多次操作 查询并修改区间内长度==len的第一次出现位置 修改区间,变为空 思路 类似于求区间最大子段和(应该是这个吧,反正我没做过) 维护区间rt的 从l开始向右的最长长度 从r开始向左的 ...

  6. 【入门详解】MyBatis入门基础详解

    什么是mybatis? MyBatis是支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索.MyBatis使用简单的XM ...

  7. CSS3 动画的一些属性

    定义式 @keyframes 动画名称{ from{ } to{ } } 调用式 动画类似函数,只定义不调用是没效果的,所以要配合调用式使用. animation: 动画名称 动画时间 延时 时间曲线 ...

  8. os.environ() 说明

    我们想要用Python获得一些有关系统的各种信息的时候就不得不想到os的environ,那这里面都具体包含了那些内容呢? 一.简介 对于官方的解释,environ是一个字符串所对应环境的映像对象.这是 ...

  9. WPF基础学习笔记整理 (五) DependencyObject & DependencyProperty

    参考资料: 1.http://www.cnblogs.com/Zhouyongh/archive/2009/10/20/1586278.html 基础知识: DependencyObject & ...

  10. jq的attr()与prop()之间区别

    1.attr() 一直存在,prop() 仅存在于 jq-1.6 及其之后 2.新版本jq使用细节: 2.1 自定义添加至dom节点的属性,用attr获取 2.2 表单类checked.selecte ...