Webpack4.0各个击破(1)html篇

webpack作为前端最火的构建工具,是前端自动化工具链 最重要的部分,使用门槛较高。本系列是笔者自己的学习记录,比较基础,希望通过 问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习 webpack工具中相应的处理办法。(本篇中的参数配置及使用方式均基于 webpack4.0版本

Webpack4.0各个击破(1)html篇_第1张图片

一. webpack中的html

对于浏览器而言,html文件是用户访问的入口点,也是所有资源的挂载点,所有资源都是通过html中的标记来进行引用的。而在webpack的构建世界里,html只是一个展示板,而entry参数中指定的javascript入口文件才是真正在构建过程中管理和调度资源的挂载点,html文件中最终展示的内容,都是webpack在加工并为所有资源打好标记以后传递给它的,业界将这种有别与浏览器的模式称之为“webpack的逆向注入”

二.html文件基本处理需求

前端项目可以大致分为 单页面应用多页面应用,现代化组件中的html文件主要作为访问入口文件,是