课件地址：geektime-webpack-course ppt
代码地址：https://github.com/tangyefei/get-start-webpack

1. 作者介绍

程柳峰，在腾讯负责约40人的工程效率建设，曾主导团队将FIS3构建切换到Webpack4，该过程涉及

  • 多页面打包
  • SSR
  • PWA
  • Prerender

等多种构建场景，以及

  • 多实例构建
  • 并行压缩
  • 公共资源分包
  • treeshaing
  • 动态Polyfill

等构建策略，对Webpack的打包速度和体积优化有丰富的经验。

2. 为什么要掌握Webpack

应用场景和开发方式

随着手机、移动平板等设备的普及，软件开发不只是PC端的开发，还包括了多终端的开发。

要支持多终端的开发，做不同的打包显得尤其重要，比如PC端中后台应用需要打包成SPA应用，而H5则因为对网速的要求，需要进行服务端渲染和PWA离线缓存。

Node.js社区的异常繁荣

很多的js包被开发出来，但是浏览器通常无法直接使用npm的组件，需要使用Webpack等工具来构建。

前端的三大框架的发展

JSX、Vue指令在浏览器中是无法解析的，需要使用Webpack等工具进行转换，框架的使用无论走哪个方向都需要Webpack的知识。学习Webpack以后，对其他跨站应用的开发，Weex、React Native等也能快速上手。

3. 初学Webpack会遇到什么困难

一切皆为模块；需要掌握众多概念；配置异常灵活。

4. 课程内容划分

基础篇 核心概念和开发必备技巧

  • 第1章 webpack与构建发展历史
  • 第2章 webpack基础用法

  • 第3章 webpack进阶用法

    进阶篇 构建配置和优化策略

  • 第4章 编写可维护的webpack构建配置

  • 第5章 webpack构建速度和体积优化策略

    源码篇 剖析内部源码并编写自定义的loader和插件

  • 第6章 通过源码掌握webpack打包原理

  • 第7章 编写Loader和插件

    实战篇 从项目出发应用学习到的知识

  • 第8章 React全家桶和webpack开发商城项目

5. 为什么需要构建工具

  • 转换ES6语法
  • 框架层面的语法糖无法支持，比如要支持JSX
  • CSS前缀补全、预处理器（LESS SASS）
  • 压缩混淆
  • 图片压缩

解义

  • 压缩：去掉空格，换行，注释等，格式紧凑；
  • 混淆：替换变量名或方法名，让js不容易看懂

6. 前端构建的演变历程

早期CSS、JS代码没有压缩，直接发布，在网页上逻辑是直接暴露的。

一种做法是，把资源上传都在线工具上，然后下载到压缩过后的版本。

07年左右出现的YUI Tool在本地对CSS、JS进行压缩。

随着require.js和sea.js的催生，导致模块化编写方式越来越复杂。

随之grunt出现了，能将过程拆分成一个一个任务，但因为它需要将中间结果存放到本地磁盘，所以比较慢。

gulp将结果存放在了内存中会更快；百度推出了fis3。

然后又出现了rollup、webpack、parcel，其中webpack是现阶段使用最广泛的。

7. 为什么选择Webpack

  • 社区活跃度远超过grunt和gulp等其他构建工具
  • 社区生态丰富
  • 配置灵活和插件化扩展
  • 官方更新迭代速度快

8. 环境安装

安装node和npm

本篇教程作者先安装了了nvm，然后基于nvm来安装node和npm。感兴趣可以了解下nvm的使用。

安装webpack和webpack-cli

  1. $ npm init
  2. $ npm i webpack webpack-cli -D

9. 从零配置的例子开始

默认配置文件是webpack.config.js。

可以在package.json中通过webpack --config指定来指定配置文件。

零配置（什么都不写）的webapck，会默认应用的配置包含如下的内容：

  1. module.exports = {
  2.   entry: "./src/index.js",
  3.   output: {
  4.     filename: "main.js"
  5.   }
  6. }

运行命令 node_modules/.bin/webpack，可以看到 entry 中的文件被打包到了 dist 目录下。

参考提交：3e9e7a1

10. 完整的例子

在安装好webpack和webpack-cli后，我们来实现一个最简单的例子。

在一个空项目新增src文件夹，并新增两个js文件：

  1. // src/index.js
  3. import { helloworld } from './helloworld';
  5. document.write(helloworld());
  1. // src/helloworld.js
  3. export function helloworld() {
  4.   return 'hello world';
  5. }

配置文件

  1. // webpack.config.js
  3. const path = require('path');
  5. module.exports = {
  6.   mode: "production",
  7.   entry: "./src/index.js",
  8.   output: {
  9.     path:path.join(__dirname, "dist"),
  10.     filename: "bundle.js"
  11.   }
  12. }

在html文件引用打包的文件

  1. // dist/index.html
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.   <meta charset="UTF-8">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9.   <title>Document</title>
  10. </head>
  11. <body>
  13.   <script src="bundle.js"></script>
  14. </body>
  15. </html>

运行命令 node_modules/.bin/webpack，然后用浏览器打开 dist/index.html 可以看到内容被输出到了文档中。

参考提交：250b92c

本地安装默会在node_modules/.bin下创建一个软链接，而package.json是能读取到该目录下的命令的。

因此为了更方便地构建，可在package.json中如下配置，然后通过npm init -y生成该文件。

然后通过增加配置：

  1. "scripts": {
  2.     "webpack": "webpack"
  3. },

npm run webpack即可执行构建。