webpack学习一

发布时间:2019-08-11 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了webpack学习一脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

一、什么是webpack?
gIThub上的概念:A bundler(打包机) for javascript and friends. Packs(打包) many modules into a few bundled assets. Code Splitting(代码分割) allows to load parts for the application on demand. Through "loaders," modules can be CommonJs, amD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
它是一个给js准备的打包工具,它可以把很多的模块打包成一些很少的静态文件。webpack它有一个自己的特性叫Code Splitting(代码分割),代码分割可以使得你的项目在加载的过程中只去加载那些项目中当时只需要的一部分文件。webpack的整个工具中有一个loader的概念,模块是可以通过这个loader去处理各种各样的文件,还有如果这个文件是js的话,无论这个文件是common.js的模块化方式写的,还是AMD模块化方式写的,或者es6模块化方式写的,它都可以通过loader进行处理,它还可以处理css文件、图片文件、json文件等等文件,甚至还可以是你自己定义的一些文件。

webpack学习一

Goals目标:
1.Split the dePEndency tree into chunks loaded on demand 切分它的依赖树到不同的代码块里,按需加载这些依赖,这跟我们前端的懒加载概念有点像。
2.Keep initial loading time low 保持初始化的加载时间更少
3.Every static asset should be able to be a module 任何的一个静态的资都可以被视为一个模块在项目中被引用
4.Ability to integrate 3rd-party libraries as modules 可以整合一些第三方的类库,并且把第三方的类库也视作为它的模块,在项目中引用
5.Ability to customize nearly every part of the module bundler 可以在整个的打包过程中去自定义(几乎是每一个部分都可以去自定义)一些自己想做的一些事情
6.Suited for Big PRojects 适合大型项目

二、webpack与之前已经有的打包工具gulp、grunt有什么区别?
(1)Code Splitting代码分割
webpack has two types of dependencies in its dependency tree: sync and async. Async dependencies act as split points and form a new chunk. After the chunk tree is optimized, a file is emitted for each chunk.
Read more about Code Splitting.
(2)Loaders
webpack can only process JavaScript natively, but loaders are used to transform other resources into JavaScript. By doing so, every resource forms a module.

Clever parsing

webpack has a clever parser that can process nearly every 3rd party library. It even allows exPressions in dependencies such as: require("./templates/" + name + ".jade"). It handles the most common module styles: CommonJs and AMD.
(3)Plugin System插件系统
webpack features a rich plugin system. Most internal features are based on this plugin system. This allows you to customize webpack for your needs and distribute common plugins as open source.
(4)模块热更新可以在开发的过程中大大的提高开发和调试的效率

其它:
github官网https://github.com/webpack/we...

脚本宝典总结

以上是脚本宝典为你收集整理的webpack学习一全部内容,希望文章能够帮你解决webpack学习一所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。