为什么要用webpack?
 
现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。
模块化,让我们可以把复杂的程序细化为小的文件;
 
类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可以识别;
Scss,less等CSS预处理器;
 
这些改进确实大大提高了开发的效率,但是利用他们开发的文件往往需要额外的处理才能被浏览器识别,而手动处理又是非常繁琐的,这就为webpack这些工具的出现提供了需求。
 
webpack是模块打包器,他可以分析你的项目结构,找到JavaScript模块以及其他一些不能被浏览器直接识别的文件,比如typescript、less、scss等,然后把他们转换和打包为合适的格式供浏览器使用。
 
webpack和grunt/Gulp工作方式的区别:
 
grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译、组合、压缩等任务的具体步骤,工具之后可以自动替你完成这些任务
 
webpack的工作方式是:把你的项目当成一个整体,通过一个给定的主文件index.js,webpack将从这个文件找到项目的所有依赖文件,使用loader处理他们,最后打包为一个或多个浏览器可以识别的JavaScript文件
 
webpack、gulp/grunt、npm打包方面有什么区别:
 
1.webpack是模块打包器,把所有模块打包成一个或少量文件,使你只需要加载少量文件即可以运行应用
 
2.gulp/grunt是自动化构建工具,无法打包模块,插件比webpack丰富
 
3.npm是node的包管理器,用于管理node的第三方软件包,npm最大的优势是任务命令,只需要几个任务命令足以完成你的模块打包和自动化构建的所有需求。

为什么要用webpack!的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. webpack之傻瓜式教程

    接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...

  3. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  4. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  5. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

  6. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  7. webpack的使用

    1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...

  8. Webpack 配置摘要

    open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...

  9. Vue + Webpack + Vue-loader 系列教程(2)相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  10. Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

随机推荐

  1. 【摘】Linux虚拟地址空间布局以及进程栈和线程栈总结

    在CSDN上看到的一篇文章,讲的还是满好的. 原文地址:Linux虚拟地址空间布局以及进程栈和线程栈总结 一:Linux虚拟地址空间布局 (转自:Linux虚拟地址空间布局) 在多任务操作系统中,每个 ...

  2. java收藏的技术资料链接

    TCP三次握手详解: https://blog.csdn.net/baiyan3212/article/details/81302448 ICE通信: https://blog.csdn.net/zh ...

  3. go中加号的用法

    // + 的用法 package main import "fmt" func main() { // 加号两端都是数字的话,做加法运算 var i = 1 var j = 1 v ...

  4. 【知识强化】第四章 网络层 4.4 IPv4

    这节课我们来学习一个非常重要的概念,就是IPv4地址,其实也是我们常用的IP地址. 首先我们来了解一下,为什么会有IP地址的出现以及它是做什么用的.假如说在很多年前我遇到一个女生非常的漂亮,等了十年之 ...

  5. 转载:tomcat性能的优化

    考虑一下这种场景,你开发了一个应用,它有十分 优秀的布局设计,最新的特性以及其它的优秀特点.但是在性能这方面欠缺,不管这个应用如何都会遭到客户拒绝.客户总是期望它们的应用应该有更好的性能.如 果你在产 ...

  6. 【leedcode】950. Reveal Cards In Increasing Order

    题目如下: In a deck of cards, every card has a unique integer.  You can order the deck in any order you ...

  7. 【架构】Linux的架构(architecture)

    最内层是硬件,最外层是用户常用的应用,比如说firefox浏览器,evolution查看邮件,一个计算流体模型等等.硬件是物质基础,而应用提供服务.但在两者之间,还要经过一番周折. 还记得Linux启 ...

  8. mysql中int的长度与值的问题

    我们在数据库中设置一个int类型,设置好长度,然后会发现并没有受到长度的限制,这是因为,int值的范围和这个长度根本没有关系. int的存储大小是4个字节(B), 计算机存储单位的换算: 1B=8b ...

  9. Excel表格 函数

    1.四则运算(加.减.乘.除).求和.平均.计数.最值. 2. 逻辑函数 (IF函数.NOT函数.等) 3.时间和日期 ( NOW 返回当前日期和时间.等) 4.数学与三角函数 5.文本 ( LOWE ...

  10. flutter Could not find the built application bundle

    报错信息Could not find the built application bundle at build/ios/iphoneos/Runner.app. Error launching ap ...