专栏首页Web 开发也来说说webpack

也来说说webpack

入门

webpack,官方定位是一个模块打包工具,基础命令极其简单

JavaScript

webpack ./entry.js bundle.js

1

webpack ./entry.js bundle.js

在CLI模式中,第一个参数是入口文件,第二个参数是输出文件,并读取当前cwd目录下面的webpack.config.js配置,根据配置生成对应的bundle.js文件。

其用法与RequireJS里面的r.js命令极其相似。

快速上手

如果一个新业务,想做一下JS的模块化管理,那么可以立即选择webpack了。

如果一个老业务,曾经用了RequireJS或者SeaJS,那么也可以选择切换webpack了。

如果想做一个库\框架去为生态提供服务,也可以立即选择webpack,他能自动配置最终生成的library.js文件支持AMD\CommonJS等模块化方案。

用好配置里面的resolve,改造一下原有的Grunt\Gulp流程,即可使用webpack,业务代码基本无需改造。

多种模块化打包加载方案对比:http://webpack.github.io/docs/comparison.html

其实对于老业务而已,仅仅将JS的模块化从RequireJS替换到webpack,其收益并不明显,仅仅是最后生成的JS文件要小一些而已。

进阶

如果单单从CLI模式中的提供的参数来看,webpack的能力也就到此为止了。但webpack的作者并非只想做一个AMD\CommonJS\ES6 Modules的协议实现。

webpack提供了一个Loader和Plugin的机制,让社区通过提交自己的Loader和Plugin,大大拓展了webpack的应用场景。

别忘了,webpack的REPL可是完整的nodejs,也就是说Grunt、Gulp能做的事情,webpack也能做(只是能做,不代表webpack擅长做)。

同时,通过各种Loader和Plugin,webpack还能打包样式、图片等资源文件,并按需将这些资源文件inline到html中。

与babel的勾搭

建议es-2015就先别折腾了,webpack本身编译速度,在我的MBP上面是50ms上下,但加入babel并使用es-2015语法转换后,编译耗时直接涨到700~800ms,这还仅仅是只有两个js文件的demo。

在webpack的roadmap里面,看到有对ES6 Modules进行支持的计划,我们还是静等吧。

欠成熟的Loader和Plugin列表

其最富有想象力、最能拓展的Loader和Plugin,她们的列表是竟然是人工维护的一份Github Pages。相对于其他社区来说,这块差了点。同时由于是手动维护的列表,其Loader和Plugin的质量,只能通过Github和npm中进行判断。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 手札《nginx – A Practical Guide to High Performance》

    今晚无意发现Nginx官方出了一本Guide to Hight Performance的书,翻了一下,有一些蛮有意思的点。

    libo1106
  • 第三方评论系统

    首先首页设计就让人眼前一亮,其次是友言提供的功能,社会化评论系统,正是做独立网站很需要的

    libo1106
  • 使用jQuery.data()查看元素上绑定的事件

    最近遇到一个诡异的问题,发现我添加在一个HTMLElement片段上面的事件绑定,会在后续的流程中,无故丢失了。但是,我不知道它是什么时候丢失的。

    libo1106
  • webpack安装异常

    webpack中文指南:https://zhaoda.net/webpack-handbook/index.html

    Dawnzhang
  • Webpack系列-第一篇基础杂记 前言简介配置实践&优化总结

    公司的前端项目基本都是用Webpack来做工程化的,而Webpack虽然只是一个工具,但内部涉及到非常多的知识,之前一直靠CV来解决问题,之知其然不知其所以然,...

    菜的黑人牙膏
  • 【先行者】webpack学习笔记(节选)

    在打包的时候,输入 webpack --model=development或production,

    web前端教室
  • 快速了解 前端打包 webpack

    webpack 用于编译 JavaScript 模块,是 JavaScript 静态模块的打包工具。从 webpack v4.0.0 开始,可以不用引入一个配置...

    王念博客
  • Webpack 4正式发布!从0配置到生产模式,你需要知道的都在这里了

    为中大型项目提供webpack的配置并不是什么大问题。 然而,对于较小的项目来说,这很麻烦,特别是当你想要启动一些玩具应用时。

    疯狂的技术宅
  • webpack 中版本兼容性问题错误总结

    一定不要运行npm i  XXX  -g(-d) 一定要指定版本,尽量低版本,也不最新版本,会导致不兼容和指令不一样的问题。

    李文杨
  • webpack4.0各个击破(10)—— Integration篇

    webpack在工具链中的角色定位是非常清晰的,那么为了与其他流程进行合作,就需要使用任务管理工具来启动webpack,本文介绍两种常见的方法。

    大史不说话

扫码关注云+社区

领取腾讯云代金券