详解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实现的分页函数
Dec 22 Javascript
面向对象Javascript核心支持代码分享
May 23 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
详解JavaScript 的变量
Mar 08 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
基于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
全国中波电台频率表
2020/03/11 无线电
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
vue.js的提示组件
2017/03/02 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
python BeautifulSoup使用方法详解
2013/11/21 Python
python使用arp欺骗伪造网关的方法
2015/04/24 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
python 正确保留多位小数的实例
2018/07/16 Python
值得收藏的10道python 面试题
2019/04/15 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
Python如何存储数据到json文件
2020/03/09 Python
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
2014年教育实习工作总结
2014/11/22 职场文书
仰望星空观后感
2015/06/10 职场文书
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL