详解webpack介绍&安装&常用命令


Posted in Javascript onJune 29, 2017

webpack系列目录

基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com/ifengkou/webpack-template

正文

Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。主要是用来打包在浏览器端使用的javascript的。同时也能转换、捆绑、打包其他的静态资源,包括css、image、font file、template等

webpack的官网是 http://webpack.github.io/ ,文档地址是 http://webpack.github.io/docs/

市面已存在大量的模块管理和打包工具,为什么还重复造轮子,webpack有什么特色?

这些已有的模块化工具并不能很好的完成如下的目标:

  1. 将依赖树拆分成按需加载的块
  2. 初始化加载的耗时尽量少
  3. 各种静态资源都可以视作模块
  4. 将第三方库整合成模块的能力
  5. 可以自定义打包逻辑的能力
  6. 适合大项目,无论是单页还是多页的 Web 应用

webpack 特点

代码拆分

Webpack 有两种组织模块依赖的方式,同步和异步。异步依赖作为分割点,形成一个新的块。在优化了依赖树后,每一个异步区块都作为一个文件被打包。

Loader

 Webpack 本身只能处理原生的 JavaScript 模块,但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样,任何资源都可以成为 Webpack 可以处理的模块。

智能解析

Webpack 有一个智能解析器,几乎可以处理任何第三方库,无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候,允许使用动态表达式 require("./templates/" + name + ".jade")。

插件系统

Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的,还可以开发和使用开源的 Webpack 插件,来满足各式各样的需求。

快速运行

Webpack 使用异步 I/O 和多级缓存提高运行效率,这使得 Webpack 能够以令人难以置信的速度快速增量编译。

总结下来其主要的优势:

1.按需加载模块,按需进行懒加载,在实际用到某些模块的时候再增量更新

2.webpack 是以 commonJS 的形式来书写脚本,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。

3.能被模块化的不仅仅是 JS 了,能处理各种类型的资源。

4.开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。

5.扩展性强,插件机制完善

安装

首先要安装 Node.js, Node.js 自带了软件包管理器 npm

用npm 安装webpack

$ npm install webpack -g

此时 Webpack 已经安装到了全局环境下,可以通过命令行 webpack -h 查看相关指令

通常我们会将webpack安装到项目依赖,这样就可以使用本地版本的webpack

//进入项目目录
//确定已有package.json,没有就npm init 创建
$ npm install webpack --save-dev

//查看webpack 版本信息
$ npm info webpack
//安装指定版本
$ npm install webpack@1.31.x --save-dev

如果要使用webpack开发工具,要单独安装 webpack-dev-server

$ npm install webpack-dev-server --save-dev

常用命令

webpack

构建命令,webpack的常用参数

$ webpack --config webpack.min.js //另一份配置文件

$ webpack --display-error-details //显示异常信息

$ webpack --watch //监听变动并自动打包
 
$ webpack -p //压缩混淆脚本,这个非常非常重要!
 
$ webpack -d //生成map映射文件,告知哪些模块被最终打包到哪里了

webpack-dev-server

webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。webpack-dev-server发送关于编译状态的消息到客户端,客户端根据消息作出响应。

webpack-dev-server有两种模式支持自动刷新——iframe模式和inline模式

  1. 在iframe模式下:页面是嵌套在一个iframe下的,在代码发生改动的时候,这个iframe会重新加载
  2. 在inline模式下:一个小型的webpack-dev-server客户端会作为入口文件打包,这个客户端会在后端代码改变的时候刷新页面

使用iframe模式,无需额外配置,只需在浏览器输入http://localhost:8080/webpack-dev-server/index.html

使用inline模式有两种方式:命令行和nodejs API

1.命令行: 在运行时,加上 --inline 选项

$ webpack-dev-server --inline

访问,通过http://localhost:8080 就可以访问

2.nodejs API 方式 ,需要手动把 webpack-dev-server/client?http://localhost:8080 加到配置文件的入口文件处

webpac-dev-server支持Hot Module Replacement,即模块热替换,在前端代码变动的时候无需整个刷新页面,只把变化的部分替换掉

下章,就开始利用 Webpack 实现 前端项目的 自动构建部署!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
浅析JavaScript回调函数应用
May 22 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 Javascript
基于node.js制作简单爬虫教程
Jun 29 #Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 #Javascript
详解webpack自动生成html页面
Jun 29 #Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 #Javascript
详解webpack分包及异步加载套路
Jun 29 #Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 #Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 #Javascript
You might like
解析CodeIgniter自定义配置文件
2013/06/18 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
JavaScript判断浏览器及其版本信息
2017/01/20 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
布同自制Python函数帮助查询小工具
2011/03/13 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
python中JWT用户认证的实现
2020/05/18 Python
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
销售部主管岗位职责
2013/12/18 职场文书
邮政员工辞职信
2014/01/16 职场文书
银行内勤岗位职责
2014/04/09 职场文书
预备党员转正考核材料
2014/06/03 职场文书
职务任命书范本
2014/06/05 职场文书
组工干部演讲稿
2014/09/02 职场文书
初中学习计划书范文
2014/09/15 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
教师党员个人总结
2015/02/10 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
经济纠纷起诉状
2015/05/20 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript