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 全局安装
-
安装 webpack
-
如果上面安装的是 webpack v4+ 版本, 还需要安装 CLI , 才能使用 webpack 命令行
-
如果安装后,命令行窗口 webpack 命令不可用,则手动配置 全局目录的 环境变量
2.2 快速入门
VSCode 中安装插件 Node Snippets ,有代码快捷提示
2.2.1 打包 JS 模块
默认情况下, 模块化 JS 浏览器不能识别,可通过 webpack 打包后让浏览器识别模块化 JS
-
全局安装 webpack@v4.35.2 与 webpack-cli@3.3.6
-
安装后查看版本号。如果有红色字提醒,没关系忽略它。
-
如果安装后,命令行窗口 webpack 命令不可用,则配置环境变量:
-
创建以下目录结构和文件:
-
bar.js 文件内容如下:
-
main.js 文件内容如下:
-
node 运行 js 模块,注意命令执行所在目录: WebStudy\webpack-demo1
-
index.html 文件引入 main.js , 如下:
-
访问 index.html , 浏览器无法识别 JS 模块化文件
-
打包 JS,注意命令执行所在目录: WebStudy\webpack-demo1 ,不要少了 -o
命令: webpack 模块入口文件路径 -o 模块出口文件路径
查看 bundle.js 会发现里面包含了上面 bar.js 文件的内容。 -
将 index.html 引入的 JS 文件改为打包之后,浏览器可以识别的 JS目标文件
-
浏览器访问 index.html 后,按 F12 控制台正常输出。
2.2.2 改造目录结构
-
改造目录结构和文件的划分,划分为 src 和 dist 目录
把源码存储到 src 目录中
把打包后的结果存储到 dist 目录中
-
打包 JS
-
修改index.html
2.2.3 打包配置文件 webpack.config.js
每当修改js文件内容后,都要 webpack 重新打包,打包时要指定入口和出口比较麻烦,可通过配置解决。
-
在 webpack-demo2 目录下创建 webpack.config.js 配置文件,该文件与 src 处于同级目录
总结:读取当前目录下 src 文件夹中的 main.js(入口文件)内容,把对应的 js 文件打包,打包后的 bundle.js文件放入当前目录的 dist 文件夹下 -
执行打包命令
-
解决打包时出现 黄色警告:
通过 mode 选项指定模式配置,告诉webpack使用对应环境的预设插件
参考:https://webpack.js.org/configuration/mode/
重新打包,发现没有黄色警告了。 -
测试访问 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 导出默认成员
- 语法:默认成员只能有一个,不然会报错
- 示例: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
-
安装 style-loader 和 css-loader 依赖
首先安装相关 Loader 插件:
css-loader 是 将 css 装载到 javascript;
style-loader 是让 javascript 认识 css。
-
修改 webpack.config.js
-
在src文件夹创建 css 文件夹, css文件夹下创建 style.css
-
在 main.js 只引入 style.css
-
重新打包编译
-
访问 index.html , 看看背景是不是变成红色
4.2 打包 Images 资源
4.2.1 打包 Images 步骤
- 安装 file-loader 依赖
- 修改 webpack.config.js
- 修改 style.css
- 打包编译
- 访问根目录下的 index.html , 背景图并未显示出来
- 问题:
如果直接访问根目录下的 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 中自动的
-
安装插件
-
修改 webpack.config.js
-
修改 index.html, 模拟下vue页面
-
重新打包
运行后,你会发现 dist 目录下多有一个 index.html , 并且文件中自动引入了 bundle.js
-
运行 dist/index.html 文件,背景图正常显示了。不要运行了 根目录下的 index.html
5 实时重新加载
5.1 说明
- 问题:
每一次手动打包很麻烦,打包后还需要手动刷新浏览器 - 解决:
采用 webpack 提供的工具: webpack-dev-server ,它允许在运行时更新所有类型的模块后,而无需手动打包和刷新页面,会自动打包和刷新页面。可以很大程度提高开发效率。
参考:https://webpack.docschina.org/guides/development/#使用-webpack-dev-server
5.2 实操
- 安装依赖
- 修改 webpack.config.js 配置
- 修改 package.json 的 scripts
–open 选项打包成功,自动打开浏览器
- 打包
- 测试,修改 style.css, 会自动打包且浏览器会自动刷新, 如下注释掉图片,就只有背景色了
6 Babel 浏览器兼容性
6.1 安装 Bable
6.2 配置 webapck.config.js
6.3 main.js 代码
npm run build 打包,然后查看 bundle.js 代码,已经转换为了 ES5 语法。