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