引言

[上一篇笔记](Webpack学习笔记(一) | 青训营 - 掘金 (juejin.cn))我们学了webpack的定义，使用以及webpack处理css文件的具体流程。接下来我写一下webpack的其他应用。

Webpack处理JS文件（接入Babel）

Babel代码转译工具，诞生于2016年，诞生背景是2015年发行的ES6引入了很多新特性（比如说箭头函数、class、let……），但是当时很多浏览器并不支持ES6，所以需要将程序员编写的ES6代码降级成ES5（或者更低版本）。Babel负责将高版本的JavaScript（ES6+）代码转换为较旧版本的JavaScript（通常是ES5）。

使用webpack接入Babel作为加载器，就是以loader的形式来引入。第一步仍然是安装依赖，然后编写配置文件（module），再执行编译命令(npx webpack)。

Webpack处理HTML（HtmlWebpackPlugin）

HtmlWebpackPlugin可以通过js自动生成HTML文件,而不必手动在HTML文件中去写script标签对js文件进行引入。第一步仍然是安装依赖，第二步编写配置文件（plugins），第三步执行编译命令。

然后执行npx webpack，就会在dist路径下生成index.html和main.js文件,并且会在html文件中自动引入main.js文件，如下图所示。

PS:产物中的main.js和我们原始编写的index.js并不会完全一样

HtmlWebpackPlugin的其它配置项

参考文档

1、babel-loader | webpack 2、HtmlWebpackPlugin | webpack 3、jantimon/html-webpack-plugin：简化HTML文件的创建，为您的webpack捆绑包提供服务 (github.com)