第八章 Webpack

1 Webpack 介绍

1.1 Webpack 是什么

Webpack 是一个前端的静态模块资源打包工具，能让浏览器也支持模块化。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

1.2 Webpack 作用

• Webpack 核心主要进行 JavaScript 资源打包
• 如下图，它可以结合其他插件工具，将多种静态资源css、png、sass 分类转换成一个个静态文件，这样可以减少页面的请求。
  
• 可集成 babel 工具实现 EcmaScript 6 转 EcmaScript 5 ，解决兼容性问题
• 可集成 http 服务器
• 可集成模块热加载，当代码改变后自动刷新浏览器 等等功能

1.3 参考资料

webpack1 官网
webpack2.x 英文官网
webpack2.x 中文官网
webpack2.x 指南文档

2 Webpack 安装和案例

2.1 全局安装

1. 安装 webpack
   

2. 如果上面安装的是 webpack v4+ 版本, 还需要安装 CLI , 才能使用 webpack 命令行
   

3. 如果安装后，命令行窗口 webpack 命令不可用，则手动配置 全局目录的 环境变量

2.2 快速入门

VSCode 中安装插件 Node Snippets ,有代码快捷提示

2.2.1 打包 JS 模块

默认情况下， 模块化 JS 浏览器不能识别，可通过 webpack 打包后让浏览器识别模块化 JS

1. 全局安装 webpack@v4.35.2 与 webpack-cli@3.3.6
   

2. 安装后查看版本号。如果有红色字提醒，没关系忽略它。
   

3. 如果安装后，命令行窗口 webpack 命令不可用，则配置环境变量：

4. 创建以下目录结构和文件：
   

5. bar.js 文件内容如下：
   

6. main.js 文件内容如下：
   

7. node 运行 js 模块，注意命令执行所在目录： WebStudy\webpack-demo1
   

8. index.html 文件引入 main.js , 如下：
   

9. 访问 index.html , 浏览器无法识别 JS 模块化文件
   

10. 打包 JS，注意命令执行所在目录： WebStudy\webpack-demo1 ，不要少了 -o
    命令: webpack 模块入口文件路径 -o 模块出口文件路径
    
    查看 bundle.js 会发现里面包含了上面 bar.js 文件的内容。

11. 将 index.html 引入的 JS 文件改为打包之后，浏览器可以识别的 JS目标文件
    

12. 浏览器访问 index.html 后，按 F12 控制台正常输出。
    

2.2.2 改造目录结构

1. 改造目录结构和文件的划分，划分为 src 和 dist 目录
   把源码存储到 src 目录中
   把打包后的结果存储到 dist 目录中
   

2. 打包 JS
   

3. 修改index.html
   

2.2.3 打包配置文件 webpack.config.js

每当修改js文件内容后，都要 webpack 重新打包，打包时要指定入口和出口比较麻烦，可通过配置解决。

1. 在 webpack-demo2 目录下创建 webpack.config.js 配置文件，该文件与 src 处于同级目录
   总结：读取当前目录下 src 文件夹中的 main.js（入口文件）内容，把对应的 js 文件打包，打包后的 bundle.js文件放入当前目录的 dist 文件夹下

2. 执行打包命令
   

3. 解决打包时出现 黄色警告：
   通过 mode 选项指定模式配置，告诉webpack使用对应环境的预设插件
   参考：https://webpack.js.org/configuration/mode/
   
   重新打包，发现没有黄色警告了。

4. 测试访问 index.html , 按 F12 查看控制台输出的信息
   

2.3 总结全局安装

不推荐 全局安装 webpack。全局安装的 webpack ，在打包项目的时候，使用的是你安装在自己电脑上的webpack，如果项目到了另一个人的电脑上，他可能安装的是旧版本 webpack。那么就可能涉及兼容性的问题。而且如果他没有在全局安装 webpack 则就无法打包。所以，为了解决以上的问题，官方推荐本地安装 webpack，就是将 webpack 安装到对应项目中。这样项目到哪里，webpack 就跟到哪里（webpack 打包工具随着项目走）。

2.4 本地安装（推荐）

2.4.1 说明

本地安装的时候，建议把 webpack 安装到 devDependencies 开发依赖 ( --save-dev ) 中，因为 webpack 只是一个打包工具，项目如果需要上线，上线的是打包的结果，而不是这个工具。所以我们为了区分生产环境和开发环境依赖，通过 --save （生产环境）和 --save-dev （开发环境）来区分。

2.4.2 本地安装命令

• 安装 webpack
  2. 如果上面安装的是 webpack v4+ 版本, 还需要安装 CLI , 才能使用 webpack 命令行
  

2.5 本地安装案例

• 为了测试本地安装，先把全局安装的 webpack 和 webpack-cli 卸载掉
  
• 安装 webpack@v4.35.2 与 webpack-cli
  将 webpack-demo2 复制一份为 webpack-demo3
  
• 执行 webpack 命令会报错
  在本地安装的 webpack ，要通过在项目文件夹下 package.json 文件中的 scripts 配置命令映射
  
• 然后再通过 npm run 命令别名 执行对应命令， 如：
  查看 webpack 版本号：
  运行 main.js 模块：
  注意：如果命令映射的别名是 start ，可省略 run 进行简写执行，即：
  
  打包构建
  

3 EcmaScript 6 模块规范

• 导出模块 export （等价于 module.exports）
• 导入模块 import （等价于 require）

创建以下目录结构和文件：

3.1 导出默认成员

1. 语法：默认成员只能有一个，不然会报错
   
2. 示例：bar.js
   

3.2 导入默认成员

语法：
示例：
main.js

3.3 导出非默认成员

示例：
bar.js

错误示例：

3.4 导入非默认成员

语法：

示例：
main.js

4 打包 CSS/Images 等资源

• Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要结合插件来使用，这些插件在Webpack 中被称为 Loader （加载器） 来进行转换。
• Loader 可以理解为是模块和资源的转换器，它本身是一个函数，参数接受的是源文件， 返回值是转换后的结果。
• 这样，我们就可以通过 require 或 import 来加载任何类型的模块或文件，比如 CSS、 图片。

4.1 打包 CSS 资源

创建 webpack-demo5

1. 安装 style-loader 和 css-loader 依赖
   首先安装相关 Loader 插件：
   css-loader 是 将 css 装载到 javascript；
   style-loader 是让 javascript 认识 css。
   

2. 修改 webpack.config.js
   

3. 在src文件夹创建 css 文件夹, css文件夹下创建 style.css
   

4. 在 main.js 只引入 style.css
   

5. 重新打包编译
   

6. 访问 index.html , 看看背景是不是变成红色
   

4.2 打包 Images 资源

4.2.1 打包 Images 步骤

1. 安装 file-loader 依赖
   
2. 修改 webpack.config.js
   
3. 修改 style.css
   
4. 打包编译
   
5. 访问根目录下的 index.html , 背景图并未显示出来
6. 问题：
   如果直接访问根目录下的 index.html ，那么图片资源路径就无法访问到
   解决方案：就是把 index.html 放到 dist 目录中
   但是 dist 是打包编译的结果，而非源码，所以把 index.html 放到 dist 就不合适
   而且如果我们一旦把打包的结果文件名 bundle.js 改了之后，则 index.html 也要手动修改
   综合以上遇到的问题，可以使用一个插件： html-webpack-plugin 来解决

4.2.1 使用 HtmlWebpackPlugin 插件

作用：解决文件路径问题

• 将 index.html 打包到 bundle.js 所在目录中
• 同时也会在 index.html 中自动的

1. 安装插件
   

2. 修改 webpack.config.js
   
   

3. 修改 index.html, 模拟下vue页面
   

4. 重新打包
   运行后，你会发现 dist 目录下多有一个 index.html , 并且文件中自动引入了 bundle.js
   
   

5. 运行 dist/index.html 文件，背景图正常显示了。不要运行了 根目录下的 index.html

5 实时重新加载

5.1 说明

• 问题：
  每一次手动打包很麻烦，打包后还需要手动刷新浏览器
• 解决：
  采用 webpack 提供的工具： webpack-dev-server ，它允许在运行时更新所有类型的模块后，而无需手动打包和刷新页面，会自动打包和刷新页面。可以很大程度提高开发效率。
  参考：https://webpack.docschina.org/guides/development/#使用-webpack-dev-server

5.2 实操

1. 安装依赖
   
2. 修改 webpack.config.js 配置
   
3. 修改 package.json 的 scripts
   –open 选项打包成功，自动打开浏览器
   
4. 打包
   
5. 测试，修改 style.css, 会自动打包且浏览器会自动刷新, 如下注释掉图片，就只有背景色了
   

6 Babel 浏览器兼容性

6.1 安装 Bable

6.2 配置 webapck.config.js

6.3 main.js 代码

npm run build 打包，然后查看 bundle.js 代码，已经转换为了 ES5 语法。