详解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 相关文章推荐
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
javascript中的数字与字符串相加实例分析
Aug 14 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
javascript使用call调用微信API
Dec 15 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
Vuex简单入门
Apr 19 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
javaScript中indexOf用法技巧
Nov 26 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
农民C键的运用技巧
2020/03/04 星际争霸
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
Python描述器descriptor详解
2015/02/03 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
python3字符串操作总结
2019/07/24 Python
python打开使用的方法
2019/09/30 Python
python-numpy-指数分布实例详解
2019/12/07 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
德国家具在线:Fashion For Home
2017/03/11 全球购物
京东国际站:JOYBUY
2017/11/23 全球购物
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
介绍一下linux的文件权限
2012/02/15 面试题
统计员岗位职责
2013/11/14 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
群众路线专项整治方案
2014/10/27 职场文书
催款律师函范文
2015/05/27 职场文书
Python音乐爬虫完美绕过反爬
2021/08/30 Python
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA
使用Ajax实现进度条的绘制
2022/04/07 Javascript
Docker官方工具docker-registry案例演示
2022/04/13 Servers