Webpack 核心概念、安装与常用命令详解

系列目录与前言

webpack系列目录

webpack 系列 二：webpack 介绍&安装

webpack 系列 三：webpack 如何集成第三方js库

webpack 系列 四：webpack 多页面支持 & 公共组件单独打包

webpack 系列 五：webpack Loaders 模块加载器

webpack 系列 六：前端项目模板-webpack+gulp实现自动构建部署

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

Webpack 核心特性解析

正文

Webpack 是一款用于打包前端模块的工具，它通过静态分析模块间的依赖关系，并依据指定规则生成对应的静态资源。其核心应用场景是打包浏览器端运行的 JavaScript 代码，同时也能处理、捆绑其他类型的静态资源，例如 CSS、图片、字体文件以及模板文件等。

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 和多级缓存机制提升运行效率，使其能够以极高的速度进行增量编译。

总结下来其主要的优势：

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 支持两种自动刷新模式：iframe 模式和 inline 模式。

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

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

使用 inline 模式有两种方式：命令行和 Node.js API。

1.命令行：在运行时，加上 --inline 选项。

$ webpack-dev-server --inline

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

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

webpack-dev-server 支持 Hot Module Replacement（模块热替换），在前端代码变动时无需整个刷新页面，仅替换变化的部分。

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。