webpack作为前端最火的构建工具，是前端自动化工具链最重要的局部，应用门槛较高。本系列是笔者本人的学习记录，比拟根底，心愿通过问题 + 解决形式的模式，以前端构建中遇到的具体需要为出发点，学习webpack工具中相应的解决方法。（本篇中的参数配置及应用形式均基于webpack4.0版本）
一. webpack中的html
对于浏览器而言，html文件是用户拜访的入口点，也是所有资源的挂载点，所有资源都是通过html中的标记来进行援用的。而在webpack的构建世界里，html只是一个展现板，而entry参数中指定的javascript入口文件才是真正在构建过程中治理和调度资源的挂载点，html文件中最终展现的内容，都是webpack在加工并为所有资源打好标记当前传递给它的，业界将这种有别与浏览器的模式称之为“webpack的逆向注入”。
二.html文件根本解决需要
前端我的项目能够大抵分为 单页面利用 和 多页面利用，现代化组件中的html文件次要作为拜访入口文件，是<style> 款式标签和<script>脚本标签的挂载点，打包中须要解决的根本问题包含：
- 个性化内容填充（例如页面题目，形容，关键词）
- 多余空格删除（间断多个空白字符的合并）
- 代码压缩（多余空白字符的合并）
- 去除正文
三.入口html文件的解决
3.1 单页面利用打包
对于入口html文件的解决间接应用html-webpack-plugin插件来设置肯定的配置参数即可，具体的配置参数能够参考其github地址:html-webpack-plugin我的项目地址，在此间接给出根本用法示例。
webpack.config.js配置：
index.html模板文件(构建生成的入口页面是以此为模板的):
打包后生成的index.html:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div><p>tony stark</p><p>bruce banner </p></div><script type="text/javascript" src="main.boundle.js"></script></body></html>3.2 多页面利用打包
如果我的项目中有多个页面，那么打包的时候须要思考两个根本问题：
- 1.如何主动生成多个页面？
- 2.如果援用中存在公共的模块，怎样才能提取公共模块？
为了演示多页面利用打包的场景，咱们来构建如下的一组示例我的项目及其依赖关系：
多页面利用的根本构造了解起来并不简单，能够将其看做是多个单页面利用的组合，在webpack中须要进行一些配置调整：
entry参数须要配置多个依赖入口文件:
entry:{ "main":__dirname + "/src/indexController.js", "about":__dirname + "/src/aboutController.js", "list":__dirname + "/src/listController.js",},html文件则须要别离援用对应的入口文件并生成对应的拜访入口：
plugins:[ //index.html new HtmlWebpackPlugin({ title:'MainPage', template:'src/index.html', filename:'index.html', templateParameters:{ param1:'tony stark', param2:'bruce banner' }, chunks:['main'], }), //about.html new HtmlWebpackPlugin({ title:'AboutPage', template:'src/about.html', filename:'about.html', templateParameters:{ param1:'tony stark', param2:'bruce banner' }, chunks:['about'], }), //list.html new HtmlWebpackPlugin({ title:'ListPage', template:'src/list.html', filename:'list.html', templateParameters:{ param1:'tony stark', param2:'bruce banner' }, chunks:['list'], }), ],能够看到在生成html文件时曾经为其独自援用了chunks数组中指定的模块，这使得对应的页面生成时只依赖本人须要的脚本。
1.对于公共模块提取
上一大节解决了多页面利用的根本打包的需要，从失去的打包后的模块中，很容易看出它存在反复打包的问题，eventbus.js这个公共库被indexController.js和aboutController.js中均被援用，但在不同的chunks中被反复打包，当公共局部的体积较大时，这样的形式显著是不能承受的。实际上分包问题并不是多页面利用中才存在的，而且是非常复杂的，它不仅要思考公共模块自身的大小，模块之间的援用关系，还须要思考同步援用和异步援用等等十分多的问题，笔者尚未钻研分明。
webpack1-3的版本中应用commonsChunkPlugin插件来解决这个问题，在4.0以上的版本中废除了原有办法，改为应用optimization.splitChunks和optimization.runtimeChunk来解决优化chunk拆分的问题，对于两者的区别能够看《webpack4：连奏中的进化》这篇博文。
2\. 组件模板html文件的解决
在基于Angular的我的项目中或者你会须要解决此类问题。github上点赞较多的Angular-webpack-starter我的项目对于html文件的解决是间接应用raw-loader当做文本文件解决，揣测其外部将html文件中的内容当做模板字符串应用并在框架外部进行了加工。
须要留神的是，html-webpack-plugin插件是依赖于html-loader而工作的，当你显式应用/\\.html$/作为规定来筛选文件时，同样会抉择到作为入口文件的html资源，从而造成抵触报错。在Angularjs1.X我的项目中可思考应用ngTemplage-loader插件。
四. 小结
本文应用的html文件是较为简单的，仅蕴含根本的标签和属性，并未蕴含其余资源援用（款式，图片等），毕竟webpack的组成部分太过庞杂，去除烦扰信息有针对性的学习更容易了解。资源管理及定位将在后续的章节论述。