本系列的主题是 Vue，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

对 Vue 的理解

• Vue 是一套用于构建用户界面的渐进式 JavaScript 框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
• 轻量级的框架，只关注视图层，是一个构建数据的视图集合，包含了 Vuex + Vue Router 的 Vue 项目 gzip 之后 也只有 30kB
• 双向数据绑定，数据操作较为简单。
• Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。
• 组件式开发，可复用，低耦合，使用小型、独立和可复用的组件构建应用
• 模板语法：Vue.js 使用了基于 HTML 的模板语法。DOM操作是十分耗费性能的，在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
• 基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易
• 单页面应用不利于seo，可以通过SSR服务端渲染来做seo，如nuxt.js

常用的指令

• 条件渲染指令 v-if
• 列表渲染指令v-for
• 属性绑定指令v-bind 缩写：:

<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button>

• 事件绑定指令v-on 缩写：@

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

• 双向数据绑定指令v-model

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。

三者的区别

• px是固定的像素，是相对于显示器屏幕分辨率而言的，一旦设置了就无法因为适应页面大小而改变。

为了解决px的问题，提出了em。它是相对于当前对象内文本的字体尺寸，若没有设置行内文本的字体尺寸，则使用浏览器默认字体尺寸，一般为16px。

但em使用起来依旧有诸多不便，复杂的嵌套逻辑使得更改了部分元素会产生字体大小变化的连锁反应。

rem是CSS3新增加的相对单位，即root em，是相较于根元素（html)。rem的根据根节点使得计算更清晰。

• em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局，场景如移动端。em和rem都是由浏览器转换为像素值，具体大小取决于您的设计中的字体大小设置。

em 和 rem 单位之间的区别是浏览器根据谁来转化成px值，理解这种差异是决定何时使用哪个单元的关键。

我们要通过复习 rem 和 em 单位如何工作，来理解em和rem之间的区别。

em 单位如何转换为像素值

当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小，他们转换为像素大小取决于应用在当前元素的字体尺寸。

例如，如果一个 div 有 18px 字体大小，10em 将等同于 180px，即 10 × 18 = 180。

CSS padding设置为 10em

计算结果为 180px (或接近它)

rem 单位如何转换为像素值

当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。

例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160。

CSS padding设置为 10rem

计算结果为160px

重点理解

有一个比较普遍的误解，认为 em 单位是相对于父元素的字体大小。 事实上，根据W3标准 ，它们是相对于使用em单位的元素的字体大小。

父元素的字体大小可以影响 em 值，但这种情况的发生，纯粹是因为继承。 让我们看看为什么以及如何起作用。

em 单位的遗传效果

使用 em 单位存在继承的时候，情况会变得比较棘手，因为每个元素将自动继承其父元素的字体大小。 继承效果只能被明确的字体单位覆盖，比如px,vw

使用 em 单位的元素字体大小根据它们来定。 但该元素可能继承其父元素的字体大小，而父元素又继承其父元素的字体大小，等等。 因此，以 em 为单位的元素字体大小可能会受到其任何父元素的字体大小影响。

再看rem的优点

rem这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

参考：

• http://caibaojian.com/rem-vs-em.html
• https://www.runoob.com/w3cnote/px-em-rem-different.html
• http://caibaojian.com/rem-vs-em.html
• https://webdesign.tutsplus.com/zh-hans/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984
• https://blog.csdn.net/qq_37149252/article/details/106137305
• https://www.runoob.com/cssref/css-units.html

什么是src

src是source的缩写，表示外部文件的引用，代表了指向外部资源的位置，把引用的文件加载到html页面的指定位置中去。

src属性是页面内容中不可缺少的一部分，常用到 js脚本，img图片和frame等元素。例如:

<script src="script.js">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

<img src="2.png" />
<img src="https://apps.bdimg.com/img/2.png" />

什么是href

href是Hypertext Reference的简写，表示超文本引用，代表了指向网络资源的所在位置，它与页面直接的关系为链接的关系。

<link href="reset.css" rel=”stylesheet“/>
<a href="https://www.php.cn/">

区别

• src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执行完毕，所以一般js脚本会放在底部而不是头部。
• href是指向网络资源所在位置（的超链接），用来建立和当前元素或文档之间的连接，当浏览器识别到它他指向的文件时，就会并行下载资源，不会停止对当前文档的处理。

前言

很多面试官会问：

谈谈你对 HTML5语义化标签的理解。

那么本篇博客可以对你理解HTML5语义化标签有所帮助。

一：什么是语义元素？

语义元素清楚地向浏览器和开发者描述其意义。

非语义元素的例子：<div> 和 <span> - 无法提供关于其内容的信息。

语义元素的例子：<form>、<table> 以及 <img> 清晰地定义其内容。

二：为什么要语义化？

• 代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
• 有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
• 提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
• 便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
• 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

三：常用的语义元素

HTML5提供了新的语义元素来定义网页的不同部分，它们被称为“切片元素”，如图所示

四：文档结构标签

• <main> 定义文档的主体部分
• <nav> 定义导航链接

HTML 标签列表（功能排序） | 菜鸟教程 https://www.runoob.com/tags/ref-byfunc.html

五：参考

• HTML5 语义元素 https://www.w3school.com.cn/html/html5_semantic_elements.asp
• html语义化标签_越努力，越幸运！-CSDN博客 https://blog.csdn.net/qq_38128179/article/details/80811339

什么是HTML5

HTML5是HTML的新标准，其主要目标是无需任何额外的插件如Flash、Silverlight等，就可以传输所有内容。它囊括了动画、视频、丰富的图形用户界面等。

区别

从文档声明类型上看：

• HTML是很长的一段代码，很难记住。如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• HTML5却只有简简单单的声明，方便记忆。如下：

<!DOCTYPE html>

从语义结构上看：

• HTML4.0：没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。
• HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header>、<article>、<footer>。

从语法的处理上看：

HTML无法处理不准确的语法；HTML5能够处理不准确的语法。

因为浏览器的兼容问题，不同浏览器对一些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

CSS选择器的解析是从右向左解析的，为了避免对所有元素进行遍历。

• 若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。
• 若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。

两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。

而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。

在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

媒体查询可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面。

最简单的媒体查询语法看起来是像这样的：

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

它由以下部分组成：

• 一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）；
• 一个媒体表达式，是一个被包含的CSS生效所需的规则或者测试；
• 一组CSS规则，会在测试通过且媒体类型正确的时候应用。

一个例子：

@media screen and (width: 600px) {
    body {
        color: red;
    }
}

• png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。
• jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
• gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果。
• webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

本系列的主题是 Webpack，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

webpack性能优化

webpack性能优化主要指两个环境：

• 开发环境性能优化
• 生产环境性能优化

除了前面的开发环境和生产环境配置，还有以下性能优化处理：

开发环境性能优化包括：

• 优化打包构建速度
  • HMR
• 优化代码调试
  • source-map

生产环境性能优化包括：

• 优化打包构建速度
  • oneOf
  • babel缓存
  • 多进程打包
  • externals
  • dll
• 优化代码运行的性能
  • 缓存(hash-chunkhash-contenthash)
  • tree shaking
  • code split
  • 懒加载/预加载
  • pwa

HMR 热模块替换

为什么要使用HMR 热模块替换功能？

我们回看一下前面总结的开发环境配置：

/*
  开发环境配置：能让代码运行
    运行项目指令：
      webpack 打包运行项目
      npx webpack-dev-server 启动webpack-dev-server
*/

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
      {
        // 处理less资源
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 处理css资源
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          // 关闭es6模块化
          esModule: false,
          outputPath: 'imgs'
        }
      },
      {
        // 处理html中img资源
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        // 处理其他资源
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
};

下面我们看一下这种配置存在什么问题

运行指令：npx webpack-dev-server ，启动webpack-dev-server

然后在index.js文件中打印一段话：console.log('index.js文件被加载了~');

只要index.js文件重新被加载，就会打印上面那段话

现在去修改样式文件

#box {
  width: 400px;// 200px修改为400px
  height: 200px;
  background-image: url('../imgs/angular.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

修改之后，很明显整体页面被刷新，内容被重新打印了一次

意思就是：当我们修改css文件时，明明js文件没有变化，但js文件也被重新加载了一次，所以打包的时候，看似只修改了css文件，实际上是把js文件也重新打包了一次，这是一个问题。

再写一个模块：

在index.js中引入上面那个print模块，并且在下面调用一下：

效果：

发现模块被加载，并且模块的print方法被调用执行了

现在我们修改一下print.js文件，'hello print'改为`'hello webpack'

console.log('print.js被加载了~');

function print() {
  const content = 'hello webpack';
  console.log(content);
}

export default print;

保存查看效果，可以发现整个页面被重新刷新了，所有代码重新执行：

这个意思就代表：假设以后我们有100个js模块，100个样式模块，如果只修改其中某一个模块，这整200个模块就需要重新打包，这个速度可以想想是非常慢的，更不要说以后的模块会越来越多，那打包情况只会越来越慢。

所以我们想实现这样的功能：如果只有一个模块发生变化，那么只需要修改这一个模块代码就足够了，其他模块理应是不变的

做这个功能要使用webpack的HMR 热模块替换

HMR: hot module replacement 热模块替换 / 模块热替换

作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块），极大提升构建速度

HMR功能的使用非常简单，只需要在devServer里配置hot：true即可：

  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true,
    // 开启HMR功能
    // 当修改了webpack配置，新配置要想生效，必须重新webpack服务
    hot: true
  }

修改配置后，运行指令：npx webpack-dev-server ，重新启动webpack-dev-server

开启HMR功能跟之前更新有什么区别？

首先打印结果这里已经显示HMR功能已经开启：

下面修改样式文件，保存，可以发现只更新一个样式文件，js文件并不会重新加载：

可以发现：样式文件可以使用HMR功能，之所以能使用是因为style-loader内部实现了~

这也是为什么我们在开发环境要使用style-loader，生产环境要用MiniCssExtractPlugin.loader提取成单独文件，因为开发环境借助style-loader能让性能更好，打包速度更快，但是上线的时候考虑性能优化，所以不能用

前面样式文件可以使用HMR功能，js文件行不行呢？

修改print.js文件，保存，发现整个页面被重新刷新了一遍，这一点可以知道js文件默认不能使用HMR功能

html文件可以使用HMR功能吗？

在html文件中修改一段代码：

保存后发现当开启HMR功能后，html文件改动后并没有任何变化：

html文件: 默认不能使用HMR功能，同时会导致问题：html文件不能热更新了~

通过修改entey入口，改成一个数组，把html文件引入就可以解决上面的问题了：

entry: ['./src/js/index.js', './src/index.html'],

修改配置后，打包运行项目

测试发现html文件也是没有HMR功能的，一旦html文件发生变化，整体页面就会重新刷新

那么html文件需要HMR功能吗？

html不像js文件，一个项目里会有很多个js模块，而运行的html只会有一个，一旦发生变化，就一定要变化，它只需要变化一个文件，既然一定要变化，那就没办法优化，所以html文件不用做HMR功能

前面讲到了js默认不能使用HMR功能，这并不代表js就不需要HMR功能，如何对js文件使用HMR功能？

用法：

if (module.hot) {
  // 一旦 module.hot 为true，说明开启了HMR功能。 --> 让HMR功能代码生效
  module.hot.accept('./print.js', function() {
    // 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。
    // 会执行后面的回调函数
    print();
  });
}

修改print.js，查看效果

可以发现，print.js会重新更新，但index.js不会变，即index.js不会重新加载，样式和结构也不会重新加载，这就是js文件的HMR功能的使用

注意：HMR功能对js的处理，只能处理非入口js文件的其他文件。

为什么呢？

因为入口文件会将其他文件全部引入，一旦入口文件变化，其他文件重新引入，就会重新加载，这是没办法阻止的，所以入口文件是做不了HMR功能的，只能对入口文件引入的一些依赖或者其他文件做HMR功能。

比如修改入口文件下面的打印代码：

保存，可以发现所有东西都要重新打包构建：

参考

• Webpack5从入门到精通
• webpack 中文文档 (docschina.org)

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。

本系列的主题是 Webpack，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

webpack.config.js

webpack 开箱即用，可以无需使用任何配置文件。然而，webpack 会假定项目的入口起点为 src/index.js，然后会在 dist/main.js 输出结果，并且在生产环境开启压缩和优化。

通常你的项目还需要继续扩展此能力，为此你可以在项目根目录下创建一个 webpack.config.js 文件，然后 webpack 会自动使用它。

webpack.config.js是webpack的配置文件。 作用是：指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）

所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。

下面开始介绍webpack的这个配置文件

创建配置文件

1. 创建文件 webpack.config.js

2. 配置内容如下

const { resolve } = require('path'); // node 内置核心模块，用来处理路径问题。

module.exports = {
	entry: './src/js/index.js', // 入口文件
	output: { // 输出配置
		filename: './built.js', // 输出文件名
		path: resolve(__dirname, 'build/js') // 输出文件路径配置
	},
	mode: 'development' //开发环境
};

如何打包样式资源以及loader执行顺序是什么

打包 CSS 资源

1. 下载安装 loader 包

npm i css-loader style-loader less-loader less -D

2. 修改配置文件

/*
  webpack.config.js  webpack的配置文件
    作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）

    所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。
*/

// resolve用来拼接绝对路径的方法
const { resolve } = require('path');

module.exports = {
  // webpack配置
  // 入口起点
  entry: './src/index.js',
  // 输出
  output: {
    // 输出文件名
    filename: 'built.js',
    // 输出路径
    // __dirname nodejs的变量，代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build')
  },
  // loader的配置
  module: {
    rules: [
      // 详细loader配置
      // 不同文件必须配置不同loader处理
      {
        // 匹配哪些文件
        test: /\.css$/,
        // 使用哪些loader进行处理
        use: [
          // use数组中loader执行顺序：从右到左，从下到上 依次执行
          // 创建style标签，将js中的样式资源插入进行，添加到head中生效
          'style-loader',
          // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将less文件编译成css文件
          // 需要下载 less-loader和less
          'less-loader'
        ]
      }
    ]
  },
  // plugins的配置
  plugins: [
    // 详细plugins的配置
  ],
  // 模式
  mode: 'development', // 开发模式
  // mode: 'production'
}

模块loader可以链式调用。链中的每个loader都将对资源进行转换。链会逆序执行。第一个loader将其结果（被转换后的资源）传递给下一个loader，依此类推。最后，webpack期望链中的最后的loader 返回 JavaScript。

应保证 loader 的先后顺序：'style-loader' 在前，而 'css-loader' 在后。如果不遵守此约定，webpack 可能会抛出错误。

不同文件必须配置不同loader处理

css文件要用style-loader和css-loader

less文件要用less-loader，style-loader和css-loader

具体这三个loder的作用见上面代码注释。

loader执行顺序（非常重要，切记！！！）：

use数组中loader执行顺序：从右到左，从下到上 依次执行

其实所谓的从下到上就是把数组里的每个元素换行展示了，本质还是数组从右至左。

如何打包html资源

打包html资源需要用到html-webpack-plugin这个插件，下载安装 plugin 包

npm install --save-dev html-webpack-plugin

实例文件目录：

和loader使用的一个区别是，插件plugin下载后需要引入后才能使用：

// 引入
const HtmlWebpackPlugin = require('html-webpack-plugin');

默认配置：

/*
  loader: 1. 下载   2. 使用（配置loader）
  plugins: 1. 下载  2. 引入  3. 使用
*/
const { resolve } = require('path');
// 引入
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
    ]
  },
  plugins: [
    // plugins的配置
    // html-webpack-plugin
    // 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
    new HtmlWebpackPlugin()
  ],
  mode: 'development'
};

html-webpack-plugin插件的功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）

实际开发中我们的需求：需要有结构的HTML文件

我们可以通过对HtmlWebpackPlugin添加配置选项template，添加目标html文件的路径即可，具体配置如下：

/*
  loader: 1. 下载   2. 使用（配置loader）
  plugins: 1. 下载  2. 引入  3. 使用
*/
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
    ]
  },
  plugins: [
    // plugins的配置
    // html-webpack-plugin
    // 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
    // 需求：需要有结构的HTML文件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

目标html文件：

打包出来的文件：

对html-webpack-plugin插件设置template配置属性的功能：复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）

如何打包图片资源

为什么需要对webpack做打包图片的配置？我们先看一个在样式中引入图片(background-image)的实例：

实例目录结构如下：

index.html:

index.js:

index.less:

如果我们不对图片资源做配置的话，基础的webpack.config.js配置如下:

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        // 要使用多个loader处理用use
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

对项目进行打包后，我们发现图片资源处理不了，在打包图片的时候是报错的：

所以我们需要对图片进行单独的处理

我们使用url-loader来处理图片资源，这里需要下载url-loader和file-loade两个loader：

npm i url-loader file-loade -D

url-loader有相应的优化配置属性limit，写在options里，

limit属性的作用：图片大小小于指定数值时，就会被base64处理

• 优点：减少请求数量（减轻服务器压力）
• 缺点：图片体积会更大（文件请求速度更慢）

配置如下：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        // 要使用多个loader处理用use
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 问题：默认处理不了html中img图片
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        // 使用一个loader
        // 下载 url-loader file-loader
        loader: 'url-loader',
        options: {
          // 图片大小小于8kb，就会被base64处理
          // 优点: 减少请求数量（减轻服务器压力）
          // 缺点：图片体积会更大（文件请求速度更慢）
          limit: 8 * 1024
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

配置完成后再次打包运行：

图片资源没有报错。

这里我们备注一下上面代码里我们用到的三张图片资源：

angular.jpg，12kb大小:

react.png，74kb大小:

vue.jpg，4kb大小:

再来看一下输出的资源：

我们发现打包后的资源输出了两张图片，一张74kb，一张12kb，但我们实际上引入了三张图片，还有以这样图片去哪里呢?

我们看build：

我们发现vue.jpg经过了base64处理，变成了一个非常长的编码字符串，变成了字符串的形式，而不会输出成一张图片，所以我们输出的结果就少了一张图片。这正是前面url-loader做优化配置属性limit后的效果。

我们打开build文件下的index.html文件验证一下效果:

三张图片正常显示

我们检查一下html结构，可以发现box1盒子背景图片(vue.jpg)的url是一个base64的地址：

到这里我们处理了样式里的图片资源，只是这样还不够，因为除了在样式中引入图片以外，我们还可能在html中通过<img>标签的方式引入图片：<img src="./angular.jpg" alt="angular">

在html中通过<img>标签的方式引入图片后，在原有的配置中我们再打包一次，发现没有报错，输出的结果和之前一样，打开build下的index.html：

img的路径还是src="./angular.jpg"，./是相对路径，但是相对路径下没有angular.jpg这张图片：

我们打开build下的index.html，发现<img src="./angular.jpg" alt="angular">这张图片是找不到的:

这是因为上面url-loader的配置有一个问题：默认处理不了html中img图片

这里我们还要再加一个loader：html-loader，作用是：处理html文件的img图片（负责引入img，从而能被url-loader进行处理）

下载html-loader:

npm i html-loader -D

配置：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        // 要使用多个loader处理用use
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 问题：默认处理不了html中img图片
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        // 使用一个loader
        // 下载 url-loader file-loader
        loader: 'url-loader',
        options: {
          // 图片大小小于8kb，就会被base64处理
          // 优点: 减少请求数量（减轻服务器压力）
          // 缺点：图片体积会更大（文件请求速度更慢）
          limit: 8 * 1024
        }
      },
      {
        test: /\.html$/,
        // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
        loader: 'html-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

上面的配置打包后发现还是没有报错，但是build下的index.html文件里img的src变成了[object Module]

这是为什么呢？

这是 因为url-loader默认使用es6模块化解析，而html-loader引入图片是common.js，url-loader以es6模块去解析common.js模块，解析不了。

解决方法：关闭url-loader的es6模块化，使用commonjs解析

{
  // 问题：默认处理不了html中img图片
  // 处理图片资源
  test: /\.(jpg|png|gif)$/,
  // 使用一个loader
  // 下载 url-loader file-loader
  loader: 'url-loader',
  options: {
    // 图片大小小于8kb，就会被base64处理
    // 优点: 减少请求数量（减轻服务器压力）
    // 缺点：图片体积会更大（文件请求速度更慢）
    limit: 8 * 1024,
    // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
    // 解析时会出问题：[object Module]
    // 解决：关闭url-loader的es6模块化，使用commonjs解析
    esModule: false
  }
},

关闭url-loader的es6模块化，再次打包，没有报错

查看build下的index.html文件

img的src变成[object Module]的问题已经解决，变成了完整的绝对路径，上面的长字符串是根据图片内容生成的唯一hash值。

打开build下的index.html文件，html里的图片显示正常：

我们发现打包后图片的名字有点长，这是根据图片内容生成的唯一hash值：

不想让图片名字这么长可以通过url-loader里的name属性来给图片进行重命名：name: '[hash:10].[ext]'

• [hash:10]取图片的hash的前10位
• [ext]取文件原来扩展名

对图片资源最终的配置如下：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        // 要使用多个loader处理用use
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 问题：默认处理不了html中img图片
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        // 使用一个loader
        // 下载 url-loader file-loader
        loader: 'url-loader',
        options: {
          // 图片大小小于8kb，就会被base64处理
          // 优点: 减少请求数量（减轻服务器压力）
          // 缺点：图片体积会更大（文件请求速度更慢）
          limit: 8 * 1024,
          // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
          // 解析时会出问题：[object Module]
          // 解决：关闭url-loader的es6模块化，使用commonjs解析
          esModule: false,
          // 给图片进行重命名
          // [hash:10]取图片的hash的前10位
          // [ext]取文件原来扩展名
          name: '[hash:10].[ext]'
        }
      },
      {
        test: /\.html$/,
        // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
        loader: 'html-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

打包后的图片名称已经变成取图片的hash的前10位

另外我们还可以发现webpack打包的一个优势：

上面的例子中html里引用了一次angular.jpg，在样式文件里也引用了一次angular.jpg，但打包之后其实只生成了一张angular.jpg的图片文件

所以在这里就是当webpack在解析的时候发现我们使用了同一个文件，它不会重复打包，它只会输出一次，这也是webpack的一个优势，它不会重复打包某一个文件。

如何打包其他资源

什么是其他资源呢？比如说字体图标icon

字体图标的特点就是我们不需要做任何处理，只需要原封不动的输出出去就ok了，这就是其他资源，不需要做优化，也不需要做压缩啊等等，这类资源统一归类于其他资源。

我们先下载一个字体图标，这里使用iconfont图标，随便选择一个，直接点击下载代码

下载完之后解压一下，这里包含了字体图标的所有配置

我们这里使用font-class 引用

我们新建文件夹，src/index.html，使用字体图标看一看效果

再写一个入口js文件，index.js，作用就是负责引入字体图标样式文件

iconfont.css文件里又引用了.eot、.woff、ttf和.svg资源，我们也需要放入项目中，具体看前面的实例项目文件目录

打包其他资源我们可以使用exclude排除已经处理过或者不需要处理的资源，然后使用file-loader对其他资源进行处理，一个小的优化就是可以对打包后的文件名称做一个缩短优化

具体配置：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 打包其他资源(除了html/js/css资源以外的资源)
      {
        // 排除css/js/html资源
        exclude: /\.(css|js|html|less)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

打包运行项目，字体图标显示正常

如何配置devServer

webpack-dev-server具有实时重新加载 (live reloading) 的功能。用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）

特点：只会在内存中编译打包，不会有任何输出

启动devServer指令为：npx webpack-dev-server

webpack devServer启动gzip压缩：compress: true

配置如下：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 打包其他资源(除了html/js/css资源以外的资源)
      {
        // 排除css/js/html资源
        exclude: /\.(css|js|html|less)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',

  // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）
  // 特点：只会在内存中编译打包，不会有任何输出
  // 启动devServer指令为：npx webpack-dev-server
  devServer: {
    // 项目构建后路径
    contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 3000,
    // 自动打开浏览器
    open: true
  }
};

配置好devServer，启动devServer，打开浏览器，输入：localhos:3000，这就是我们使用devServer搭建的服务器，这个服务器启动的项目。

开发环境配置总结——一个完整的开发环境配置

除了之前的配置，我们还要做一些处理，之前编写的实例目录有点乱

我们划分一下目录

把原来的路径修改好后，输入命令webpack打包项目，看一下输出结果：

我们发现所有的资源都输出到一块了，没有任何的差别

如果希望打包后的资源和原来的结构一样的，可以一个一个调

首先让先js文件输出到js的目录下，要修改output的filename属性，在built.js前加js/

  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },

重新构建一下项目，可以发现build下面就多了一个js目录

图片资源修改构建路径要在url-loader中添加outputPath配置属性：outputPath: 'imgs'

 {
   // 处理图片资源
   test: /\.(jpg|png|gif)$/,
   loader: 'url-loader',
   options: {
     limit: 8 * 1024,
     name: '[hash:10].[ext]',
     // 关闭es6模块化
     esModule: false,
     outputPath: 'imgs'
   }
 },

这样图片资源就会构建在build下面的imgs文件夹下

其他资源修改构建路径也是添加outputPath配置属性：outputPath: 'media'

  {
    // 处理其他资源
    exclude: /\.(html|js|css|less|jpg|png|gif)/,
    loader: 'file-loader',
    options: {
      name: '[hash:10].[ext]',
      outputPath: 'media'
    }

把build目录删掉，重新打包一次，就可以看到清晰的结构

有人可能会问，为什么构建后的资源没有看到之前写的css文件？这是因为css-loader把css文件打包到js当中了(复习环节)，它是跟js文件融为一体的，所以没有被单独打包出去

  {
     // 匹配哪些文件
     test: /\.css$/,
     // 使用哪些loader进行处理
     use: [
       // use数组中loader执行顺序：从右到左，从下到上 依次执行
       // 创建style标签，将js中的样式资源插入进行，添加到head中生效
       'style-loader',
       // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
       'css-loader'
     ]
   },

完整的开发环境配置：

/*
  开发环境配置：能让代码运行
    运行项目指令：
      webpack 会将打包结果输出出去
      npx webpack-dev-server 只会在内存中编译打包，没有输出
*/

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
      {
        // 处理less资源
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 处理css资源
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          // 关闭es6模块化
          esModule: false,
          outputPath: 'imgs'
        }
      },
      {
        // 处理html中img资源
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        // 处理其他资源
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
};

参考

• Webpack5从入门到精通
• webpack 中文文档 (docschina.org)

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。

圣杯布局

圣杯布局如图:

而且要做到左右宽度固定，中间宽度自适应。

1. 利用flex布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header,
        .footer {
            height: 40px;
            width: 100%;
            background: red;
        }

        .container {
            display: flex;
        }

        .left {
            width: 200px;
            background: yellow;
        }

        .middle {
            flex: 1;
            background: pink;
        }

        .right {
            width: 250px;
            background: blue;
        }
    </style>
</head>

<body>
    <div class="header">header</div>
    <div class="container">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>

</html>

2. float布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header,
        .footer {
            height: 40px;
            width: 100%;
            background: red;
        }

        .footer {
        	/* footer 清除浮动 */
            clear: both;
        }

        .container {
            padding-left: 200px;
            padding-right: 250px;
        }

        .container div {
            position: relative;
            float: left;
        }

        .middle {
            width: 100%;
            background: yellow;
        }

        .left {
            width: 200px;
            background: pink;
            margin-left: -100%;
            left: -200px;
        }

        .right {
            width: 250px;
            background: blue;
            margin-left: -250px;
            left: 250px;
        }
    </style>
</head>

<body>
    <div class="header">这里是头部</div>
    <div class="container">
        <div class="middle">中间部分</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    <div class="footer">这里是底部</div>
</body>

</html>

这种float布局是最难理解的，主要是浮动后的负margin操作，下面我们详细解析：

首先要注意我们实现该布局的三个盒子的父盒子宽度不是100%，左右是添加了padding的.container {padding-left: 200px;padding-right: 250px;} ，而左右的padding值正是left和right的宽度。

其次，非常重要的一个概念，子盒子里的margin值的百分比是基于父盒子的。

另外，要注意，最终实现好的圣杯布局里的“中间部分”的那个盒子，其实是第一个盒子，放在最前面的，并不是在三个盒子中间，顺序是这样的：先放“中间部分”，然后再依次放“左边”和“右边”。使用 float 实现圣杯布局就是在这个结构上实现的，这很重要。

F12打开控制台，我们去掉left和right最难理解的样式：

激活left的margin-left（注意：实践时逐渐改变这些值可以非常直观的理解原理），因为margin的100%是基于父盒子的，所以我们发现left逐渐往左移动，超出父盒子边界（margin的负值边界是基于父盒子的边界），当margin-left: -200px;时，left就顶到上层，处于最右边的位置了。

当margin-left: -100%;时，处于最左边的位置了。

这时候，再让left往左移动一个自身的宽度：添加left: -200px;（left值也是基于父盒子的边界），就到我们的目标位置了。

同理，对于right：当margin-left: -250px;时，right就顶到上层，处于最右边的位置。

这时候，再让right往右移动一个自身的宽度：添加left: 250px;（注意：向右移动是正值哦，上面的是向左移动，所以是负值left: -200px;，不要记混了），就到我们的目标位置了。

left: 250px;换成right: -250px;也可以实现向右移动一个自身宽度。

到此，实现圣杯布局并且对他的原理进行了解析。

双飞翼布局

有了圣杯布局的铺垫，双飞翼布局也就问题不大啦。这里采用经典的float布局来完成。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            min-width: 600px;
        }

        .left {
            float: left;
            width: 200px;
            height: 400px;
            background: red;
            margin-left: -100%;
        }

        .center {
            float: left;
            width: 100%;
            height: 500px;
            background: yellow;
        }

        .center .inner {
            margin: 0 200px;
        }

        .right {
            float: left;
            width: 200px;
            height: 400px;
            background: blue;
            margin-left: -200px;
        }
    </style>
</head>

<body>
    <article class="container">
        <div class="center">
            <div class="inner">双飞翼布局</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </article>
</body>

</html>

双飞翼布局实现的原理，参考上面圣杯布局的解析。

注意：双飞翼布局的left和right是在主盒子里面，而不是在外面，所以我们只需要通过marin-left的负值就可以实现，不需要通过设置left再往左或者往右移动。

为什么center中间还要加一个inner呢？而且inner还要设置margin: 0 200px;？

   <div class="center">
       <div class="inner">双飞翼布局</div>
   </div>

    .center .inner {
        margin: 0 200px;
    }

这也算是双飞翼布局的一点要点，添加的inner以及他的margin: 0 200px;正是双飞翼布局中间部分布局的核心，如果没有这点，就不是完整的双飞翼布局。这个inner就是我们以后在该布局中间区域添加内容的父盒子（或者说是顶层盒子）。

本系列的主题是 Vue，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

Vue 和 JQuery 的区别在哪？为什么放弃 JQuery用 Vue？

1. jQuery是直接操作DOM，Vue不直接操作DOM，Vue的数据与视图是分开的，Vue只需要操作数据即可
2. jQuery的操作DOM行为是频繁的，而Vue利用虚拟DOM的技术，大大提高了更新DOM时的性能
3. Vue中不倡导直接操作DOM，开发者只需要把大部分精力放在数据层面上
4. Vue集成的一些库，大大提高开发效率，比如Vuex，Router等

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。

css有五种定位方式，分别是：static， relative，absolute，fixed 和 sticky。

1. static 静态定位

HTML 元素的默认值，指定元素使用正常的布局行为。

静态定位的元素 top, right, bottom, left 和 z-index 属性无效。

2. relative 相对定位

相对定位是相对于默认位置（即static时的位置）进行偏移。

相对定位元素经常被用来作为绝对定位元素的容器块。

3. absolute 绝对定位

绝对定位元素会被移出正常文档流，并不为元素预留空间。

相对于上级元素（一般是父元素）进行偏移。

通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置，如果元素没有已定位的父元素，那么它的位置相对于<html>。

4. fixed 固定定位

固定定位元素会被移出正常文档流，并不为元素预留空间。

相对于视口（viewport，浏览器窗口）进行偏移。

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动，打印时，元素会出现在的每页的固定位置。

5. sticky 粘性定位

粘性定位跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

sticky 粘性定位 详解

当元素距离页面视口（Viewport，也就是fixed定位的参照）顶部距离大于 50px 时，元素以 relative 定位表现，而当元素距离页面视口小于 50px 时，元素表现为 fixed 定位，也就会固定在顶部。

代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>菜鸟教程(runoob.com)</title>
  <style>
    .aaa {
      padding: 100px;
    }

    div.sticky {
      position: -webkit-sticky;
      position: sticky;
      top: 50px;

      padding: 5px;
      background-color: #cae8ca;
      border: 2px solid #4CAF50;
    }
  </style>
</head>

<body>

  <p>尝试滚动页面。</p>
  <p class="aaa">注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

  <div class="sticky">我是粘性定位!</div>

  <div style="padding-bottom:2000px">
    <p>滚动我</p>
    <p>来回滚动我</p>
    <p>滚动我</p>
    <p>来回滚动我</p>
    <p>滚动我</p>
    <p>来回滚动我</p>
  </div>

</body>

</html>

效果：

表现方式如下：
距离页面顶部大于20px，表现为 position:relative;

距离页面顶部小于20px，表现为 position:fixed;

• https://www.runoob.com/css/css-positioning.html
• https://www.jb51.net/css/598347.html

粘性定位的注意事项

先看一个例子，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{			/*重置样式*/
				margin: 0;
				padding: 0;
			}
			dl{			/*dl是父元素*/
				padding-top: 24px;/*设置字距离盒子距离*/
			}
			dt{			/*设置粘性定位元素*/
				background: orange;/*背景颜色*/
				color:#fff;/*字体颜色*/

				position: sticky;/*设置粘性定位*/
				top:10px;/*设置粘性定位达到偏移量固定位置*/
			}
		</style>
		
	</head>
	<body>
		<div>
			<dl>
				<dt>A</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>B</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>C</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>D</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>E</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F1</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F2</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F3</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F4</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F5</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F6</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F7</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
            <dl>
				<dt>F</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F1</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F2</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F3</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F4</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F5</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F6</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
			<dl>
				<dt>F7</dt>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
				<dd>1111111</dd>
			</dl>
		</div>
	</body>
</html>

效果：

同一容器中多个粘贴定位元素独立偏移，因此可能重叠；位置上下靠在一起的不同容器中的粘贴定位元素则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果（这个下面会具体讲到）。

第一个特性源自粘性定位的定义，这么设计主要是为了避免当多个滚动互相嵌套的时候，粘性定位混乱。

第二个特性原因就是本文提到的粘性定位的计算规则，具体解释：

当我们的粘性定位元素都在一个容器的时候，大家都公用一个巨大的粘性约束矩形，因此，滚动的时候会一个一个往上重叠。

当我们的粘性定位元素属于不同容器的时候，就会有多个不同的粘性约束矩形，这些粘性约束矩形正好一个一个排列得很整齐，于是视觉上达成一个巧合一般的约定，即上一个粘性定位元素被滚走，下一个粘性定位元素正好开始有粘性效果。

参考

• https://www.zhangxinxu.com/wordpress/2020/03/position-sticky-rules/

link和@import的使用

先看看这两种方式都是如何使用的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 实例1. link标签引入yellow.css，内联样式引入green.css -->
    <link rel="stylesheet" href="yellow.css">
    <style type="text/css">
        @import url("green.css");
    </style>
</head>
<body>
    <div style="width: 50px; height: 50px;"></div>
</body>
</html>

link和@import有什么区别?

1. 从属关系：link是html的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel(一些)连接属性等；而@import是css的语法，只有导入样式表的作用。
2. 加载顺序：页面被加载时，link会和html同时被加载；而@import引入的 CSS 将在页面加载完毕后被加载。
3. 兼容性：link是 HTML 标签，所以不存在兼容性问题；而@import是 CSS2.1 才有的语法，所以只能在 IE5以上 才能识别。
4. DOM：javascript只能控制dom去改变link标签引入的样式，而@import的样式不是dom可以控制的。
5. link方式的样式权重高于@import的权重。

@import必须写在样式顶部，在html中 <style>@import url(引入的css路径);</style>

这个@import必须要写在style的第一行。

本系列的主题是 Webpack，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

缓存

缓存我们会从两个点出发：一个是对babel进行缓存，另一个是对整体的文件资源进行缓存

babel缓存

日常开发中，我们永远是js代码最多，像结构和样式要么少要么很少，即使多也没有办法做更多的处理。

为什么要对babel进行缓存呢？因为babel要对我们写的js代码做编译处理，编译成一种浏览器能识别的语法，即所谓的js兼容性处理。在编译过程中，假设有100个js模块，只改动其中1个js模块，不可能把全部的模块都重新编译一遍，其他99个应该是不变的，这一点跟前面文章讲过的HMR功能一样：一个模块变，只变这一个模块，其他模块不变。而生产环境下又不能使用HMR功能，因为HMR是基于devServer，生产环境是不需要devServer的。

开启babel缓存只需要在babel-loader的配置里加一个参数即可：cacheDirectory: true

 {
   test: /\.js$/,
   exclude: /node_modules/,
   loader: 'babel-loader',
   options: {
     presets: [
       [
         '@babel/preset-env',
         {
           useBuiltIns: 'usage',
           corejs: { version: 3 },
           targets: {
             chrome: '60',
             firefox: '50'
           }
         }
       ]
     ],
     // 开启babel缓存
     // 第二次构建时，会读取之前的缓存
     cacheDirectory: true
   }
 },

开启babel缓存，之后的 webpack 构建，将会尝试读取缓存，来避免在每次执行时，可能产生的、高性能消耗的 Babel 重新编译过程(recompilation process)。

文件资源缓存

写个例子来演示一下文件资源缓存

为了演示缓存，我们需要写一个服务器代码

server.js:

/*
  服务器代码
  启动服务器指令：
    npm i nodemon -g
    nodemon server.js 
    
    不需要下载nodemon
    node server.js
  访问服务器地址：
    http://localhost:3000

*/
const express = require('express');

const app = express();
// express.static向外暴露静态资源
// maxAge 资源缓存的最大时间，单位ms
app.use(express.static('build', { maxAge: 1000 * 3600 }));

app.listen(3000);

关于上述服务器代码疑问参考：Express细节探究(1)——app.use(express.static) - ADAM亚当 - 博客园

node server.js命令， 启动服务器

注意，上面的服务器设置了maxAge，即开启Cache-Control

通过network查看资源，刷新页面，可以看到资源来自cache，即来自缓存

查看请求可以发现请求头设置了Cache-Control，max-age=3600，即有效期为3600s，一个小时，意思就是这个资源会被强制缓存一个小时

这个缓存会带来新的问题：

假如我们修改代码，修改一下js代码

index.js:

import '../css/index.css';

function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}

// eslint-disable-next-line
// console.log(sum(1, 2, 3, 4));// 修改前

// eslint-disable-next-line
console.log(sum(1, 2, 3, 4, 5));// 修改后

再次构建，打开浏览器刷新，会发现结果没有变化

修改background-color: deeppink;，原来为pink，再次构建，发现样式同样的有没有变化

这是为什么呢？

这是因为当前资源在强制缓存期间，它是不会访问服务器的，直接读取本地缓存

这就带来了一个问题，假使我们的资源在强缓存期间出现了严重的bug，开发人员需要紧急修复，但因为资源被强制缓存，就算修复了，也会因为还在强缓存期间而无效。

我们可以通过修改资源名称来解决这个问题

有三种方法可以修改资源名称：

hash: 每次wepack构建时会生成一个唯一的hash值。

问题: 因为js和css同时使用一个hash值。

如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）

chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样

问题: js和css的hash值还是一样的

因为css是在js中被引入的，所以同属于一个chunk

contenthash: 根据文件的内容生成hash值。不同文件hash值一定不一样

这三种方法，可以发现只有contenthash是没有副作用的，所以最后的结论就是使用contenthash来修改资源名称

使用方式：

入口文件

 entry: './src/js/index.js',
 output: {
   filename: 'js/built.[contenthash:10].js',
   path: resolve(__dirname, 'build')
 },

样式文件

 new MiniCssExtractPlugin({
   filename: 'css/built.[contenthash:10].css'
 }),

完整的配置：

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

/*
  缓存：
    babel缓存
      cacheDirectory: true
      --> 让第二次打包构建速度更快
    文件资源缓存
      hash: 每次wepack构建时会生成一个唯一的hash值。
        问题: 因为js和css同时使用一个hash值。
          如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）
      chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样
        问题: js和css的hash值还是一样的
          因为css是在js中被引入的，所以同属于一个chunk
      contenthash: 根据文件的内容生成hash值。不同文件hash值一定不一样    
      --> 让代码上线运行缓存更好使用
*/

// 定义nodejs环境变量：决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';

// 复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    // 还需要在package.json中定义browserslist
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [require('postcss-preset-env')()]
    }
  }
];

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.[contenthash:10].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        // 在package.json中eslintConfig --> airbnb
        test: /\.js$/,
        exclude: /node_modules/,
        // 优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        // 以下loader只会匹配一个
        // 注意：不能有两个配置处理同一种类型文件
        oneOf: [
          {
            test: /\.css$/,
            use: [...commonCssLoader]
          },
          {
            test: /\.less$/,
            use: [...commonCssLoader, 'less-loader']
          },
          /*
            正常来讲，一个文件只能被一个loader处理。
            当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
              先执行eslint 在执行babel
          */
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'usage',
                    corejs: { version: 3 },
                    targets: {
                      chrome: '60',
                      firefox: '50'
                    }
                  }
                ]
              ],
              // 开启babel缓存
              // 第二次构建时，会读取之前的缓存
              cacheDirectory: true
            }
          },
          {
            test: /\.(jpg|png|gif)/,
            loader: 'url-loader',
            options: {
              limit: 8 * 1024,
              name: '[hash:10].[ext]',
              outputPath: 'imgs',
              esModule: false
            }
          },
          {
            test: /\.html$/,
            loader: 'html-loader'
          },
          {
            exclude: /\.(js|css|less|html|jpg|png|gif)/,
            loader: 'file-loader',
            options: {
              outputPath: 'media'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/built.[contenthash:10].css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    })
  ],
  mode: 'production',
  devtool: 'source-map'
};

参考

• Webpack5从入门到精通
• webpack 中文文档 (docschina.org)

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。

本系列的主题是 Webpack，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

多进程打包

通过thread-loader开启多进程打包

npm install --save-dev thread-loader

使用时，需将此 loader 放置在其他 loader 之前。放置在此 loader 之后的 loader 会在一个独立的 worker 池中运行。

注意：

请仅在耗时的操作中使用此 loader！因为每个 worker 都是一个独立的 node.js 进程，其开销大约为 600ms 左右。

我们一般给bable用thread-loader，即给bable开启多进程打包

用法：

  {
    test: /\.js$/,
    exclude: /node_modules/,
    use: [
+      /* 
+        开启多进程打包。 
+        进程启动大概为600ms，进程通信也有开销。
+        只有工作消耗时间比较长，才需要多进程打包
+      */
+      {
+        loader: 'thread-loader',
+        options: {
+ 		   // 产生的 worker 的数量，默认是 (cpu 核心数 - 1)
+          workers: 2 // 进程2个
+        }
+      },
      {
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage',
                corejs: { version: 3 },
                targets: {
                  chrome: '60',
                  firefox: '50'
                }
              }
            ]
          ],
          // 开启babel缓存
          // 第二次构建时，会读取之前的缓存
          cacheDirectory: true
        }
      }
    ]
  },

构建项目：

可以看到此次构建用了5.4s

我们看一下没有启用多进程打包是什么情况：

正常构建项目时间4.1s，可以看到我们开启多进程打包后构建的更慢了，主要原因是测试的几乎是一个空项目，js代码非常少，如果我们对一个正常的项目使用多进程打包，就可以看到正面的增益效果了。

对于thread-loader多进程打包，用的好的时候可以极大的提升我们的打包速度，用的差的时候，就会导致打包速度更慢

参考

• Webpack5从入门到精通
• webpack 中文文档 (docschina.org)

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。

css基本选择器有哪些？

1. 通配符选择器 * {}
2. 标签选择器 body,div,p,ul,li {}
3. id选择器 #name{}
4. 类选择器（class选择器）.center {}
5. 后代选择器 .first span{}
6. 子代选择器 .food>li{}
7. 内联选择器 <p style=""></p>
8. !important

权重计算规则：

1. 第一优先级：无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。
2. 第一等：内联样式，如：style="color:red;"，权值为1000.（该方法会造成css难以管理，所以不推荐使用）
3. 第二等：ID选择器，如：#header，权值为0100.
4. 第三等：类、伪类、属性选择器如：.bar， 权值为0010.
5. 第四等：标签、伪元素选择器，如：div ::first-line 权值为0001.
6. 通配符，子选择器，相邻选择器等。如*，>,+, 权值为0000.
7. 继承的样式没有权值。

css选择器优先级顺序

内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素选择器 = 关系选择器 = 伪元素选择器 > 通配符选择器

哪些属性可以继承？

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

本系列的主题是 Webpack，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

PWA

渐进式网络应用程序(progressive web application - PWA)可以为我们的项目添加离线体验，使用名为 Workbox 的 Google 项目，帮助我们更简单地为 web app 提供离线支持。

正常情况下，如果停止 server 然后刷新，则网页不再可访问。

比如掘金https://juejin.cn/，有网络时正常访问：

No throttling改为Offline关闭网络

再次刷新，网页不可访问：

淘宝使用了PWA技术，访问淘宝网关闭网络，刷新

可以看到关闭网络后网页依然可以访问，从network中能看到没有问题的资源基本上都是来自于ServiceWorker，就是来自PWA技术提供的资源

PWA的使用：

添加 workbox-webpack-plugin 插件，然后调整 webpack.config.js 文件：

npm install workbox-webpack-plugin --save-dev

webpack.config.js

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const WorkboxPlugin = require('workbox-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js',
    },
    plugins: [
      new HtmlWebpackPlugin({
+       title: 'Progressive Web Application',
      }),
+     new WorkboxPlugin.GenerateSW({
+       //1. 帮助serviceworker快速启动
+       //2. 删除旧的 serviceworker

+       //生成一个 serviceworker 配置文件~
+       clientsClaim: true,
+       skipWaiting: true,
+     }),
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
      clean: true,
    },
  };

完成这些设置，构建项目

...
                  Asset       Size  Chunks                    Chunk Names
          app.bundle.js     545 kB    0, 1  [emitted]  [big]  app
        print.bundle.js    2.74 kB       1  [emitted]         print
             index.html  254 bytes          [emitted]
precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js  268 bytes          [emitted]
      service-worker.js       1 kB          [emitted]
...

现在你可以看到，生成了两个额外的文件：service-worker.js 和名称冗长的 precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js。service-worker.js 是 Service Worker 文件，precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js 是 service-worker.js 引用的文件，所以它也可以运行。你本地生成的文件可能会有所不同；但是应该会有一个 service-worker.js 文件。

我们现在已经创建出一个 Service Worker。

注册 Service Worker

通过在入口文件添加以下注册代码来注册 Service Worker：

index.js

import { mul } from './test';
import '../css/index.css';

function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}

// eslint-disable-next-line
console.log(mul(2, 3));
// eslint-disable-next-line
console.log(sum(1, 2, 3, 4));

+ /*
+   1. eslint不认识 window、navigator全局变量
+     解决：需要修改package.json中eslintConfig配置
+       "env": {
+         "browser": true // 支持浏览器端全局变量
+       }
+    2. sw代码必须运行在服务器上
+       --> nodejs
+       -->
+         npm i serve -g
+         serve -s build 启动服务器，将build目录下所有资源作为静态资源暴露出去
+ */
+ // 注册serviceWorker
+ // 处理兼容性问题
+ if ('serviceWorker' in navigator) {
+   window.addEventListener('load', () => {
+     navigator.serviceWorker
+       .register('/service-worker.js')
+       .then(() => {
+         console.log('sw注册成功了~');
+       })
+       .catch(() => {
+         console.log('sw注册失败了~');
+       });
+   });
+ }

再次构建项目

现在来进行测试。停止 server 并刷新页面。如果浏览器能够支持 Service Worker，应该可以看到你的应用程序还在正常运行。

2021/11/19 update

目前来看淘宝已经下线了pwa (简单测试了一下，不严谨)，搜了网上以前支持pwa的项目都已经不支持了🙄

2019 年 PWA(Progressive Web App) 凉了吗？ - 知乎 (zhihu.com)

来自知乎 作者：张宇昂
确实挺凉的，去年年初给业务加了pwa之后由于各种原因没上本来还以为会掉队，因为那时候pwa已经挺成熟了，结果到现在都没听说有几个应用深度使用pwa。感觉pwa的用处不是很大，网速快的情况那些cache有没有都无所谓。pwa的高级形态还是得像微博的pwa一样可以做成类App的那种体验。然而在历史遗留产物不同页面都是完全不同的应用架构里只能重新编写之前的应用逻辑。在h5只有为app导流的意义下老板并没有意思让你花时间在这种事情上面

参考

• Webpack5从入门到精通
• webpack 中文文档 (docschina.org)

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。

本系列的主题是 Webpack，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

oneOf

我们在写loader的时候，rules里面有非常非常多的loader规则，但是每个文件只能匹配一个 loader，被一个 loader 处理，因此可以使用 oneOf 唯一匹配，不需要每个文件把所有的 loader 都询问一遍，这样可以提高 loader 的执行效率

webpack.config.js写法配置如下:

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 定义nodejs环境变量：决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';

// 复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    // 还需要在package.json中定义browserslist
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [require('postcss-preset-env')()]
    }
  }
];

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        // 在package.json中eslintConfig --> airbnb
        test: /\.js$/,
        exclude: /node_modules/,
        // 优先执行
        enforce: 'pre',//正常的，一个文件只能被一个loader处理，当一个文件要被多个loader处理，
        			   //一定要指定loader执行的先后顺序，先执行eslint再执行babel
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        // 以下loader只会匹配一个
        // 注意：不能有两个配置处理同一种类型文件,所以eslint-loader放在oneOf匹配之前执行
        oneOf: [
          {
            test: /\.css$/,
            use: [...commonCssLoader]
          },
          {
            test: /\.less$/,
            use: [...commonCssLoader, 'less-loader']
          },
          /*
            正常来讲，一个文件只能被一个loader处理。
            当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
              先执行eslint 在执行babel
          */
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'usage',
                    corejs: {version: 3},
                    targets: {
                      chrome: '60',
                      firefox: '50'
                    }
                  }
                ]
              ]
            }
          },
          {
            test: /\.(jpg|png|gif)/,
            loader: 'url-loader',
            options: {
              limit: 8 * 1024,
              name: '[hash:10].[ext]',
              outputPath: 'imgs',
              esModule: false
            }
          },
          {
            test: /\.html$/,
            loader: 'html-loader'
          },
          {
            exclude: /\.(js|css|less|html|jpg|png|gif)/,
            loader: 'file-loader',
            options: {
              outputPath: 'media'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    })
  ],
  mode: 'production'
};

参考

• Webpack5从入门到精通
• webpack 中文文档 (docschina.org)
• webpack优化系列-oneOf - 飞鸟和蝉

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。

• display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
• visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

本系列的主题是 Webpack，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

webpack 是什么

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。

在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。

它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

webpack 五个核心概念

1. Entry

入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

2. Output

输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

3. Loader

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

4. Plugins

插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

5. Mode

模式(Mode)指示 webpack 使用相应模式的配置。

一个小的梳理：

1. webpack能处理js/json资源，不能处理css/img等其他资源
2. 能将 es6 的模块化语法转换成浏览器能识别的语法
3. 不能将 js 的 es6 基本语法转化为 es5 以下语法
4. 生产环境比开发环境多一个压缩js代码

基本的webpack配置结构

webpack.config.js是webpack的配置文件，下面是一个打包样式资源的例子：

注意：webpack的五个核心概念除了loader，其他四个都能在下面webpack.config.js导出对象的属性中体现，而loader配置的属性是：module。

/*
  webpack.config.js  webpack的配置文件
    作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）

    所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。
*/

// resolve用来拼接绝对路径的方法
const { resolve } = require('path');

module.exports = {
  // webpack配置
  // 入口起点
  entry: './src/index.js',
  // 输出
  output: {
    // 输出文件名
    filename: 'built.js',
    // 输出路径
    // __dirname nodejs的变量，代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build')
  },
  // loader的配置
  module: {
    rules: [
      // 详细loader配置
      // 不同文件必须配置不同loader处理
      {
        // 匹配哪些文件
        test: /\.css$/,
        // 使用哪些loader进行处理
        use: [
          // use数组中loader执行顺序：从右到左，从下到上 依次执行
          // 创建style标签，将js中的样式资源插入进行，添加到head中生效
          'style-loader',
          // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将less文件编译成css文件
          // 需要下载 less-loader和less
          'less-loader'
        ]
      }
    ]
  },
  // plugins的配置
  plugins: [
    // 详细plugins的配置
  ],
  // 模式
  mode: 'development', // 开发模式
  // mode: 'production'
}

环境参数

看一下自己的环境

查看node版本

node -v

node版本为：v14.15.4

查看webpack版本

npm info webpack

webpack版本为：[email protected]

参考

• Webpack5从入门到精通

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。

本系列的主题是 Vue，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

Vue 组件的 data 为什么必须是一个函数

JavaScript中的对象是引用类型的数据，当多个实例引用同一个对象时，只要一个实例对这个对象进行操作，其他实例中的数据也会发生变化。

当 data 的值是一个对象时，它会在这个组件的所有实例之间共享。

而在Vue中，我们更多的是希望复用组件，这时就会产生问题。因为每个组件的实例都引用了相同的数据对象，更改其中一个实例的数据，就会改变其它实例中的数据。那就需要每个组件都有自己的数据，这样组件之间才不会相互干扰。

我们希望每个组件实例都管理其自己的数据。为了做到这一点，每个实例必须生成一个独立的数据对象。在 JavaScript 中，在一个函数中返回这个对象就可以了，这样就可以避免组件复用时的数据污染：

data: function () {
  return {
    listTitle: '',
    todos: []
  }
}

🔸 为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？

因为组件是用来复用的，且 JS 里对象是引用关系，如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响，如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。

什么是BFC？

块格式化上下文（Block Formatting Context，BFC），它是一个独立的渲染区域，与区域外部毫不相干。

如何形成BFC?

下列方式会创建块格式化上下文（BFC）：

应用场景有哪些？

1. 防止外边距塌陷

创建新的 BFC 避免两个相邻 <div> 之间的 外边距合并 问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .blue,
        .red-inner {
            height: 50px;
            margin: 10px 0;
        }

        .blue {
            background: blue;
        }

        .red-outer {
            /* 通过overflow: hidden创建新的BFC */
            overflow: hidden;

            background: red;
        }
    </style>
</head>

<body>
    <div class="blue"></div>
    <div class="red-outer">
        <div class="red-inner">red inner</div>
    </div>
</body>

</html>

如果我们取消BFC，注释掉 overflow: hidden; 这行代码

  .red-outer {
      /* 通过overflow: hidden创建新的BFC */
      /* overflow: hidden; */

      background: red;
  }

从上图可以发现外边距塌陷了，这就是BFC的效果。

2. 防止浮动导致父元素高度塌陷

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            border: 10px solid red;
        }

        .inner {
            background: #08BDEB;
            height: 100px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="inner"></div>
    </div>
</body>

</html>

上面的代码效果如下：

接下来将inner元素设为浮动:

.inner {
    float: left;
    
    background: #08BDEB;
    height: 100px;
    width: 100px;
  }

会产生这样的塌陷效果：

但如果我们对父元素设置BFC后, 这样的问题就解决了:

.container {
    border: 10px solid red;

	/* 通过overflow: hidden讲父盒子设置为BFC */
    overflow: hidden;
}

这也是清除浮动的一种方式。

前端常用的本地存储方式有三种:cookie、localStorage 、sessionStorage

• cookie：在HTML5标准前本地储存的主要方式，优点是兼容性好，缺点是大小只有4k，自动请求头加入cookie浪费流量，使用起来麻烦需要自行封装；

HTML5 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

• sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据，在浏览器打开期间存在，包括页面重新加载

• localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

三者的具体对比如下：

cookie使用起来麻烦需要自行封装。

localStorage和sessionStorage使用相同的API：

本系列的主题是 Webpack，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

懒加载

懒加载或者按需加载，会在文件需要使用时才加载，是一种很好的优化网页或应用的方式。

懒加载的使用加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。

project

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack</title>
</head>

<body>
  <h1>hello lazy loading</h1>
  <button id="btn">按钮</button>
</body>

</html>

test.js

console.log('test.js文件被加载了~');

export function mul(x, y) {
  return x * y;
}

export function count(x, y) {
  return x - y;
}

index.js

console.log('index.js文件被加载了~');

import { mul } from './test';

document.getElementById('btn').onclick = function() {
    console.log(mul(4, 5));
};

构建打开项目

可以发现，还没有点击按钮，test.js文件就已经加载了，这是没有做懒加载的效果

现在对test.js文件做懒加载：点击按钮的时候才加载test.js文件资源

懒加载其实就是用到了code splitting文章中动态导入的方法

懒加载写法：

index.js

console.log('index.js文件被加载了~');

// import { mul } from './test';

document.getElementById('btn').onclick = function() {
  // 懒加载~：当文件需要使用时才加载~
  import(/* webpackChunkName: 'test'*/'./test').then(({ mul }) => {
    console.log(mul(4, 5));
  });
};

构建结果：

现在的构建结果还有一个test，表示已经做了代码分割，因为前面已经讲到了，懒加载其实就是用到了code splitting文章中动态导入的方法

所以懒加载内部实现的前提条件就是先进行代码分割，先分割成单独的js文件，再对这个单独的js文件进行懒加载

打开项目：可以明显的看到，一开始这个test.js文件并没有加载

点击按钮：test.js文件才被加载

这里有一个问题，重复点击按钮会重复加载资源吗？

不会，资源第一次加载后，第二次及后续就会直接读取缓存，而不会重复加载资源

预加载

在声明 import 时，使用webapck的内置指令/* webpackPrefetch: true */就可以对指定资源进行预加载

index.js

console.log('index.js文件被加载了~');

// import { mul } from './test';

document.getElementById('btn').onclick = function() {
  // 预加载 prefetch：会在使用之前，提前加载js文件 
  // 正常加载可以认为是并行加载（同一时间加载多个文件）  
  // 预加载 prefetch：等其他资源加载完毕，浏览器空闲了，再偷偷加载资源
  import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({ mul }) => {
    console.log(mul(4, 5));
  });
};

构建结果：

可以发现test.js资源用到了prefetch技术，即预加载

打开页面看到test.js已经被加载好了，

点击按钮的时候，读取的其实是缓存

加载方式的对比

• 正常加载：可以认为是并行加载（同一时间加载多个文件）
• 懒加载：当文件需要使用时才加载~
• 预加载 prefetch：会在使用之前，提前加载js文件
  等其他资源加载完毕，浏览器空闲了，再偷偷加载资源

参考

• Webpack5从入门到精通
• webpack 中文文档 (docschina.org)

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。

如何理解z-index？

z-index 属性指定一个元素的堆叠顺序。

当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。

如何理解层叠上下文？

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸。

在层叠上下文中，子元素同样也按照上面解释的规则进行层叠。 重要的是，其子级层叠上下文的 z-index 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。

本系列的主题是 Webpack，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

tree shaking

tree shaking 是一个术语，用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性，例如 import 和 export。

tree shaking 可以去除未引用代码，减少代码体积。

前提是：必须使用ES6模块化

使用方法：开启production环境就会自动启动tree shaking

问题：

tree shaking不同版本会有一点点差异，这些差异会无意之间将我们的css代码当作未引用代码而把它干掉

为了解决这个问题，我们需要在 package.json 中添加 "sideEffects" 属性。

"sideEffects": false 代表：所有代码都没有副作用（都可以进行tree shaking），这是sideEffects的默认值，这可能会把css / @babel/polyfill （副作用）等文件干掉

我们可以通过配置sideEffects解决上述问题：

package.json

// ...
"sideEffects": [
  "**/*.css",
  "**/*.scss",
  "./esnext/index.js",
  "./esnext/configure.js"
],
// ...

参考

• Webpack5从入门到精通
• webpack 中文文档 (docschina.org)

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。

flex

flex（弹性盒子）是一种更为简洁灵活的布局方式。

容器默认存在两根轴：横轴和纵轴。

使用弹性盒子，要在父盒子先设置display:flex。

常用于：

• 在父内容里面垂直居中一个块内容。
• 分布对齐的场景等。

经常用到的属性

1. flex-direction

:) 规定容器中的项目是按行排列还是按列排列

• row：横向从左到右排列（左对齐），默认的排列方式。
• row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
• column：纵向排列。
• column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

2. justify-content

:) 定义了项目在主轴上的对齐方式

• flex-start：弹性项目向行头紧挨着填充。这个是默认值。
• flex-end：弹性项目向行尾紧挨着填充。
• center：弹性项目居中紧挨着填充。（常用）
• space-between：弹性项目平均分布在该行上。（常用）
• space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。

效果图展示：

3. align-items

:) 定义了项目在“纵轴”上的对齐方式

语法：

align-items: flex-start | flex-end | center | baseline | stretch

各个值解析:

• flex-start：侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end：侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
• center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（常用）

题目： 请用flex实现三栏布局，高度已知，左右栏宽度300px，中间自适应。

用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex值，由于这里其它盒子宽度固定，所以中间栏会自动填充。代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>三栏布局</title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        display: flex;
        /*只设置这一属性就OK*/
    }

    .left {
        background-color: aqua;
        width: 300px;
        height: 100px;
    }

    .center {
        height: 100px;
        background: #f296ff;

        flex: 1;
    }

    .right {
        height: 100px;
        background-color: #6ee28d;
        width: 300px;
    }
</style>

<body>
    <!-- 已知高度，写出三栏布局，左右宽度300px，中间自适应-->
    <div class="container">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>

效果图如下：

中间的盒子会随着浏览器窗口的放大缩小而变化。

题目：内容宽度等分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>三栏布局</title>
</head>
<style type="text/css">
    .box {
        display: flex;
    }

    .box div {
        flex: 1;
        border: 1px solid red;
    }
</style>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

效果图如下：

题目：flex: 1 代表什么意思

flex: 1 是 flex: 1 1 0 的缩略形式。

flex 值为 1，这表示每个元素占用空间都是相等的，占用的空间是在设置 padding 和 margin 之后剩余的空间。

img的srcset的作用

img 元素的 srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。

属性格式：图片地址 宽度描述w 像素密度描述x，多个资源之间用逗号分隔。例如：

<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />

上面的例子表示浏览器宽度达到 800px 则加载 middle.jpg ，达到 1400px 则加载 big.jpg。注意：像素密度描述只对固定宽度图片有效。

img 元素的 size 属性给浏览器提供一个预估的图片显示宽度。

属性格式：媒体查询 宽度描述（支持px），多条规则用逗号分隔。

<img src="images/gun.png" alt="img元素srcset属性浅析"
     srcset="images/bg_star.jpg 1200w, images/share.jpg 800w, images/gun.png 320w"
     sizes="(max-width: 320px) 300w, 1200w"/>

上面的例子表示浏览器视口为 320px 时图片宽度为 300px，其他情况为 1200px。

还有哪一个标签能起到跟srcset相似作用？（追问）

<picture>：picture 元素
HTML <picture> 元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的URL。然后，所选图像呈现在<img>元素占据的空间中。

<!--Change the browser window width to see the image change.-->

<picture>
    <source srcset="/media/cc0-images/surfer-240-200.jpg"
            media="(min-width: 800px)">
    <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
</picture>

要决定加载哪个URL，用户代理检查每个 的 srcset、media 和 type 属性，来选择最匹配页面当前布局、显示设备特征等的兼容图像。

还有什么能起到跟srcset相似作用？（追问）

css image-set()

body {
    background-image: -webkit-image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);
    background-image:         image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);
}

上述代码将会为普通屏幕使用 pic-1.jpg，为高分屏使用 pic-2.jpg，如果更高的分辨率则使用 pic-3.jpg，比如印刷。

本系列的主题是 Vue，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

什么是 MVVM？

MVVM 是是Model-View-ViewModel的缩写，Model代表数据模型，定义数据操作的业务逻辑，View代表视图层，负责将数据模型渲染到页面上，ViewModel通过双向绑定把View和Model进行同步交互，不需要手动操作DOM的一种设计**。

MVVM 的核心是 ViewModel 层，它就像是一个中转站，负责转换 Model 中的数据对象，让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。如下图所示：

一张图来说明 MVVM 的各个组成部分：

• View 层

  View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建，为了更方便地展现 ViewModel 或者 Model 层的数据，已经产生了各种各样的模板语言，各大 MVVM 框架如 Vue 都有自己用来构建用户界面的内置模板语言

• Model 层

  Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开

• ViewModel 层

  ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 View 层的数据模型是只包含状态的，比如页面的这一块展示什么，那一块展示什么这些都属于视图状态（展示），而页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互），视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新，真正实现数据驱动开发。看到了吧，View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

什么是 MVC？

MVC 指的是Model-View-Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范

• Model（模型）：处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据
• View（视图）：处理数据显示的部分。通常视图是依据模型数据创建的
• Controller（控制器）：数据模型和视图之间通信的桥梁，通常控制器负责从事图读取数据，控制用户输入，并向模型发送数据

MVC的**：Controller负责将Model的数据用View显示出来，换句话说就是在Controller里面把Model的数据赋值给View。

MVC的特点：实现关注点分离，即应用程序中的数据模型与业务和展示逻辑解耦。就是将模型和视图之间实现代码分离，松散耦合，使之成为一个更容易开发、维护和测试的客户端应用程序。

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>

</html>

<meta>：文档级元数据元素

meta 元素定义的元数据的类型包括以下几种：

• 如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。
• 如果设置了 http-equiv 属性，meta 元素则是编译指令，提供的信息与类似命名的HTTP头部相同。
• 如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。
• 如果设置了 itemprop 属性，meta 元素提供用户定义的元数据。

另外， 在同一个 <meta> 标签中，name , http-equiv 或者 charset 三者中任何一个属性存在时，itemprop 属性不能被使用。

本系列的主题是 Webpack，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

source-map

本文讲一下开发环境下如何调试代码，解决开发环境下调试代码问题，这个技术叫source-map

source-map: 一种 提供源代码到构建后代码映射 技术 （如果构建后代码出错了，通过映射可以追踪源代码错误）

在webpack中启动source-map只需要在配置中添加：devtool: 'source-map'

启动source-map后，打包运行就可以在build目录下看到built.js.map，这个文件就是source-map文件，它提供了源代码和构建后代码的映射关系

上面的写法是source-map最基本的写法

devtool的模式写法可以总结为：[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

具体就是有以下几种模式：

1.source-map：外部

错误代码准确信息 和 源代码的错误位置

2.inline-source-map：内联

只生成一个内联source-map

错误代码准确信息 和 源代码的错误位置

3.hidden-source-map：外部

错误代码错误原因，但是没有错误位置

不能追踪源代码错误，只能提示到构建后代码的错误位置

4.eval-source-map：内联

每一个文件都生成对应的source-map，都在eval

错误代码准确信息 和 源代码的错误位置

5.nosources-source-map：外部

错误代码准确信息, 但是没有任何源代码信息

6.cheap-source-map：外部

错误代码准确信息 和 源代码的错误位置

只能精确的行

7.cheap-module-source-map：外部

错误代码准确信息 和 源代码的错误位置

module会将loader的source map加入

上述这些模式，其中一些值适用于开发环境，一些适用于生产环境。对于开发环境，通常希望更快速的 source map，需要添加到 bundle 中以增加体积为代价，但是对于生产环境，则希望更精准的 source map，需要从 bundle 中分离并独立存在。

我们看一下效果：

devtool: 'inline-source-map'

构建后没有built.js.map文件

但是会在built.js文件下面生成base64编码的source-map文件

这种方法是嵌到js中的，所以叫内联，像前面生成外部built.js.map文件的叫外联

内联 和 外部的区别：1. 外部生成了文件，内联没有 2. 内联构建速度更快

应用场景

前面讲了source-map的很多种配置方案，到底怎么用呢？

这里就需要考虑两种环境：开发环境和生产环境

开发环境：速度快，调试更友好

速度快(eval>inline>cheap>...)：

• eval-cheap-souce-map(首推)
• eval-source-map

调试更友好：

• souce-map(首推)
• cheap-module-souce-map
• cheap-souce-map

最终平衡速度和调试，开发环境推荐的方案：

• eval-source-map(调试最友好)
• eval-cheap-module-souce-map(性能更好)

如果我们使用vue或者react框架开发，都会有对应的脚手架，而脚手架的配置默认是：eval-source-map

生产环境：源代码要不要隐藏? 调试要不要更友好？

内联会让代码体积变大，所以在生产环境不用内联

需要隐藏源代码的方案：

• nosources-source-map(全部隐藏)
• hidden-source-map(只隐藏源代码，会提示构建后代码错误信息)

生产环境推荐方案：

• source-map(调试最友好)
• cheap-module-souce-map(性能更好)

参考

• Webpack5从入门到精通
• webpack 中文文档 (docschina.org)

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。

什么是清除浮动？

清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。

为什么要清除浮动？

1. 导致背景不能正常显示，如果对父级设置了背景属性，导致父级不能撑开，会影响到背景图片不能正常打开。

2. 边框不能撑开，由于子级使用了浮动效果，并且已经产生了浮动，父级不能撑开，所以影响边框不会随着内容的变化而变化。

清除浮动有哪些方法？

1. 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .fahter {
            width: 400px;
            border: 1px solid deeppink;
        }

        .big {
            width: 200px;
            height: 200px;
            background: darkorange;
            float: left;
        }

        .small {
            width: 120px;
            height: 120px;
            background: darkmagenta;
            float: left;
        }

        .footer {
            width: 900px;
            height: 100px;
            background: darkslateblue;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
    </div>
    <div class="footer">footer</div>
</body>

</html>

此时：

如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。

<body>
    <div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <!-- <div class="clear">额外标签法</div> -->
    </div>
    <div class="footer">footer</div>
</body>