这节课讲解webpack4打包多页面应用过程中的提取公共代码部分。相比于webpack3，4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPlugin插件。在使用和配置上，更加方便和清晰。 »> 本节课源码 »> 所有课程源码 代码目录结构如下图所示： 最终，成功提取公共代码，如下图所示： 这...

今天介绍webpack怎么编译ES6的各种函数和语法。敲黑板：这是webpack4版本哦, 有一些不同于webpack3的地方。 »> 本节课源码 »> 所有课程源码 1. 了解babel 说起编译es6，就必须提一下babel和相关的技术生态： babel-loader: 负责 es6 语法转化 babel-preset-env: 包含 es6、7 等版本...

webpack 本身就是为了打包js所设计，作为第一节，介绍怎么打包js。 1. 检验webpack规范支持 webpack支持es6, CommonJS, AMD。 创建vendor文件夹，其中minus.js、multi.js和sum.js分别用 CommonJS、AMD 和 ES6 规范编写。 »> vendor 文件夹 代码地址 在入口文件app.js中，我们分别用...

1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的帮助下，开发者可以轻松地实现加密代码、多平台兼容。而最重要的是，它为前端工程化提供了最好支持。vue、react等大型项目的脚手架都是利用 webpack 搭建。 所以，学习webpack可以帮助开发者更好的进行基于javascript语言的开发工作。 2. 怎么学习webpack? 如果一个新...

box-sizing可以声明计算元素高宽的 CSS 盒模型。它有content-box、border-box和inherit三种取值。其中border-box是 css3 新增，也是主流 UI 框架的全局默认属性。 两种盒模型 content-box 默认值，也是 css2.1 中的盒子模型。在计算width和height时候，不计算border、padding和margin。高度、宽...

如何让 scss 代码可复用？三种复用方式分别用在何处？ 下方是一段自定义大小的样例 👇 $height: 15px !default; $width: 18px !default; @mixin size($list...) { @if length($list) == 0 { height: $height; width: $width; ...

1. 题目和答案 故事还是要从下面这道面试题说起：请问下面这段代码的输出是什么？ console.log("script start"); async function async1() { await async2(); console.log("async1 end"); } async function async2() { console.log("asy...

关于Promise Promise实例一旦被创建就会被执行 Promise过程分为两个分支：pending=>resolved和pending=>rejected Promise状态改变后，依然会执行之后的代码： const warnDemo = ctx => { const promise = new Promise(resolve => {...