二:编译ES6

今天介绍webpack怎么编译ES6的各种函数和语法。敲黑板:这是webpack4版本哦, 有一些不同于webpack3的地方。

>>> 本节课源码

>>> 所有课程源码

一:打包JS

webpack 本身就是为了打包js所设计,作为第一节,介绍怎么打包js

零:前言

1. 什么是webpack?

前端目前最主流的javascript打包工具,在它的帮助下,开发者可以轻松地实现加密代码、多平台兼容。而最重要的是,它为前端工程化提供了最好支持。vuereact等大型项目的脚手架都是利用 webpack 搭建。

所以,学习webpack可以帮助开发者更好的进行基于javascript语言的开发工作。

2. 怎么学习webpack?

如果一个新手不幸打开vue-cli中关于webpack的配置,乱起八糟的配置就像看天书一样(我就是这样)。

所以,学习的时候还是要从基础学起,首先应该学习常用的概念、插件的用法,最后,才能根据需要进行组合。

因此,这个系列教程先从JS、编译ES6等方面讲起,逐步延伸到CSSSCSS等,再到多页面、懒加载等技术,力求将知识点解构,而不是混淆在一起

3. 关于本课程

3.1 webpack版本

本课程不同于网上的v3版本,采用最新的webpack4。并且会记录v3 -> v4升级过程中的一些问题。

3.2 课程源码

如果你的自学能力很强,欢迎直接来看源码。仓库地址https://github.com/dongyuanxin/webpack-demos

如果对您的学习、工作或者项目有帮助,欢迎帮忙 Star,更欢迎一起维护。

3.3 课程地址

  1. Github 仓库地址
  2. 我的个人网站(最新 && 最快)
  3. 博客园
  4. 简书

3.4 课程源码目录 (截至 2018/7/27)

按照知识点,目录分成了 16 个文件夹(之后还会持续更新)。代码和配置都在对应的文件夹下。

  1. demo01: 打包JS
  2. demo02: 编译ES6
  3. demo03: 多页面解决方案–提取公共代码
  4. demo04: 单页面解决方案–代码分割和懒加载
  5. demo05: 处理CSS
  6. demo06: 处理Scss
  7. demo07: 提取Scss (CSS等等)
  8. demo08: JS Tree Shaking
  9. demo09: CSS Tree Shaking
  10. demo10: 图片处理–识别, 压缩, Base64编码, 合成雪碧图
  11. demo11: 字体文件处理
  12. demo12: 处理第三方JS
  13. demo13: 生成Html文件
  14. demo14: Watch Mode && Clean Plugin
  15. demo15: 开发模式–webpack-dev-server
  16. demo16: 生产模式和开发模式分离

4. 致谢

此教程是在我学习 mooc 网 四大维度解锁 Webpack3.0 工具全技能 整理的代码和v4.0版本的升级教训。欢迎大家去学习。

批量修改log中的提交信息

事情的起因是这样的:迷恋的谷歌的我最近申请了一个新的 google 邮箱。然后果断在 github 上更新了邮箱地址,并且删除了之前的 163 等国内邮箱。

回到 github 首页,我发现之前的项目提交记录都没了。到底什么情况(O_o)??

看一张灾难现场图:

仔细查找了相关资料,发现了是因为之前的提交记录中Author字段的信息是 163 等国内邮箱的。如下:

所以,解决方法就是:更改log中的提交信息

CSS3盒模型:border-box

box-sizing可以声明计算元素高宽的 CSS 盒模型。它有content-boxborder-boxinherit三种取值。其中border-box是 css3 新增,也是主流 UI 框架的全局默认属性。

scss:最常见的css预处理器

SassSCSS 其实是同一种东西,我们平时都称之为 Sass

他们都是用Ruby开发 Css 预处理器,boostrap4已经将less换成了scss

scss实现样式复用: 继承、占位符、混合宏

如何让 scss 代码可复用?三种复用方式分别用在何处?下方是一段自定义大小的样例 👇

$height: 15px !default;
$width: 18px !default;

@mixin size($list...) {
    @if length($list) == 0 {
        height: $height;
        width: $width;
    } @else if length($list) == 1 {
        height: $list;
        width: $list;
    } @else if length($list) == 2 {
        height: nth($list, 1);
        width: nth($list, 2);
    } @else {
        @debug "Too many parameters";
    }
}

谈谈promise/async/await的执行顺序与V8引擎的BUG

故事还是要从下面这道面试题说起:请问下面这段代码的输出是什么?

console.log("script start");

async function async1() {
    await async2();
    console.log("async1 end");
}

async function async2() {
    console.log("async2 end");
}
async1();

setTimeout(function() {
    console.log("setTimeout");
}, 0);

new Promise(resolve => {
    console.log("Promise");
    resolve();
})
    .then(function() {
        console.log("promise1");
    })
    .then(function() {
        console.log("promise2");
    });

console.log("script end");

Promise 概述

本文介绍了 Promise 的常用 API。

前端系列汇总

NodeJS

深入 nodejs 模块

深入 koa 源码

Jest 测试

JavaScript

JS 基础

ES6

HTML5

TypeScript

浏览器

第三方库开发

Web 安全

ReactJS

云计算

CSS 精选

动画设计

多端开发

Webpack4

一共 16 篇实战教程,助你实战 webpack v4 核心用法。>>> 查看全部内容

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×