Webpack

Webpack 介绍

• Webpack 是什么？
• Webpack 能够解决什么问题？
• Webpack 的缺点问题？
• 迁移成本，如何配置 webpack config。
• Webpack 原理、设计理念（待续。。。）
• Webpack 优化（待续。。。）
• Webpack 插件开发（待续。。。）

介绍 Webpack 之前可以先了解一下前端工程化。

前端工程化

• 第一阶段：库/框架选型
• 第二阶段：简单构建优化
• 第三阶段：JS/CSS模块化开发
• 第四阶段：组件化开发与资源管理

前端工程化包含

• 开发规范
• 模块化开发
• 组件化开发
• 组件仓库
• 性能优化
• 项目部署
• 开发流程
• 开发工具

• …

• 目录结构的制定
• 编码规范
• 前后端接口规范
• 文档规范
• 组件管理
• Git 分支管理
• Commit 描述规范
• 定期 CodeReview
• 视觉图标规范
• …

旧的任务运行工具处理方式：HTML、CSS 和 JavaScript 都是分离的。必须分别对每一项进行管理，并且还要确保所有东西正确地部署到生产环境。

|| || V

即

Web 开发中常用到的静态资源主要有 JavaScript、CSS、图片、Jade 等文件，Webpack 中将静态资源文件称之为模块。Webpack 是一个模块打包工具，其可以兼容多种 js 书写规范，且可以处理模块间的依赖关系，具有更强大的 js 模块化的功能。

Webpack 是什么：

Webpack 一个针对 JavaScript 代码的模块打包工具。—> 个针对所有前端代码的管理工具。

Webpack 为了解决文件依赖管理。

Webpack 特性：

Webpack 具有 requireJs 和 browserify 的功能，但仍有很多自己的新特性：

1. 对 CommonJS 、 AMD 、ES6的语法做了兼容
2. 对 js、css、图片等资源文件都支持打包
3. 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对 CoffeeScript、ES6 的支持
4. 有独立的配置文件 webpack.config.js
5. 可以将代码切割成不同的 chunk，实现按需加载，降低了初始化时间
6. 支持 SourceUrls 和 SourceMaps，易于调试
7. 具有强大的 Plugin 接口，大多是内部插件，使用起来比较灵活
8. webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快

Webpack 的两个最核心的设计哲学分别是：

一切皆模块 正如js文件可以是一个“模块（module）”一样，其他的（如 css、image 或 html）文件也可视作模块。因此，你可以 require(‘myJSfile.js’) 亦可以 require(‘myCSSfile.css’)。这意味着我们可以将事物（业务）分割成更小的易于管理的片段，从而达到重复利用等的目的。

按需加载 传统的模块打包工具（module bundlers）最终将所有的模块编译生成一个庞大的 bundle.js 文件。但是在真实的app里边，“bundle.js”文件可能有 10M 到 15M 之大可能会导致应用一直处于加载中状态。因此 Webpack 使用许多特性来分割代码然后生成多个“bundle”文件，而且异步加载部分代码以实现按需加载。

Webpack 能解决的问题：

• 模块化引用静态文件，统一管理静态文件（JS、CSS、IMAGES）
• 编译 ES6 代码、TypeScript 代码
• 异步加载、按需加载，提取公共代码（CommonsChunkPlugin）
• 压缩文件 + hash
• 自动编译 + 浏览器同步刷新（Webpack dev server、Hot Module Replacement、react-hot-loader）
• 支持使用全局变量 $、React，即不需要每个文件 import jquery
• 开发模式和生产模式
• 配置 publicPath，可修改代码中的文件指向 CDN 路径
• …

缺点

• 配置过多，过于复杂。
• 它使用 bundle 的解决思路在 http/2 的时代可能欠佳。
• 插件的开发较复杂，通常开发插件的时候得熟读源码。
• 官网的文档还不是很全。
• …

对比其他打包器

Webpack 配置

最简单的配置

webpack.config.js

1
2
3
4
5
6
7
8
9
var path = require('path');

module.exports = {
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

详细配置可查看阮一峰老师的 github：https://github.com/ruanyf/webpack-demos

References

• Webpack 2 入门教程 https://llp0574.github.io/2016/11/29/getting-started-with-webpack2/
• Webpack 2 快速入门 https://github.com/dwqs/blog/issues/46
• webpack 入门及实践 https://www.w3ctech.com//topic/1557
• 前端工程——基础篇 https://github.com/fouber/blog/issues/10
• React 技术栈系列教程 http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html