关于前端:Webpack40各个击破1html篇

43次阅读

共计 2749 个字符,预计需要花费 7 分钟才能阅读完成。

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.jsaboutController.js中均被援用,但在不同的 chunks 中被反复打包,当公共局部的体积较大时,这样的形式显著是不能承受的。实际上分包问题并不是多页面利用中才存在的,而且是非常复杂的,它不仅要思考公共模块自身的大小,模块之间的援用关系,还须要思考同步援用和异步援用等等十分多的问题,笔者尚未钻研分明。

webpack1- 3 的版本中应用 commonsChunkPlugin 插件来解决这个问题,在 4.0 以上的版本中废除了原有办法,改为应用 optimization.splitChunksoptimization.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 的组成部分太过庞杂,去除烦扰信息有针对性的学习更容易了解。资源管理及定位将在后续的章节论述。

正文完
 0