loyd3的博客

样式预处理是在开发中会使用一些样式预编译语言，如scss,less等，在项目打包过程中再将这些语言转换为css，借助这些语言强大和便捷的特性，可以降低项目的开发和维护成本。下面是目前最主流的两种预编译语言是如何配置的。

那么可以使用专门的插件extract-text-webpack-plugin、mini-cssextract-plugin，来解决这些问题，它们就是专门用来提取样式到CSS文件的。假设我们有 foo.js和bar.js，并且它们分别引用了 foo-style.css和bar-style.css，现在我们要通过配置使它们输出各自的 CSS文件。mini-css-extract-plugin 可以理解成extract-text-webpack-plugin 的升级版，它的特性是支持按需加载CSS。

有时会遇到现有 loader 无法很好满足需求的情况，这时就需要我们对其进行修改或者编写新的 loader。如前面代码所演示的一样，loader 本身其实非常简单，下面就从头实现一个loader在开发一个loader时，我们可以借助 npm/yarn 的软链能进行本地调试(当然之后可以考发布到 npm等)。下面让我们初始化这个loader并配置到工程中。创建一个 force-strict-loader 目录，然后在该目录下执行 npm初始化命令接着创建 index.js，也就是 loader 的主体。

每个loader本质上都是一个函数。在 Webpack 4之前，函数的输人和输出都必须为字符串;在Webpack 4之后，loader也同时支持抽象语法树 (AST)的传递，通过这种方法来减少重复的代码解析。loader 可以是链式的。我们可以对一种资源设置多个loader，第一个loader 的输入是文件源码，之后所有 loader 的输入都为上一个loader 的输出。

在资源输出时，上面配置的filename中的[name]会被换为chunk name，因此最后项目中实际生成的资源是vendor.js与app.js。filename可以不仅仅是bundle的名字，还可以是一个相对路径，即便路径中的目录不存在也没关系，Webpack 会在输出资源时创建该目录。在多入口的场景中，我们需要为对应产生的每个bundle指定不同的名字，Webpack支持使用一种类似模板语言的形式动态地生成文件名。更新缓存一般只用在生产环境的配置下，在开发环境中可以不必配置[chunkhash].

资源处理流程Webpack 中的资源处理流程在一切流程的最开始，首先需要指定一个或多个人口(entry)，也就是告诉Webpack具体从源码目录下的哪个文件开始打包。如果把工程中各个模块的依赖关系当作一棵树，那么入口就是这棵依赖树的根这些存在依赖关系的模块会在打包时被封装为一个 chunk。chunk字面的意思是代码块，在 Webpack 中可以理解成被抽象和包装过后的一些模块。根据具体配置不同，一个工程打包时可能会产生一个或多个chunk。从上面的步骤可以看到，Webpack 会从人口文件开始检索，并

AMD是英文Asynchronous Module Definition (异步模块定义)的缩写，从名字就可以看到和CommonJS和ES6 Module最大的区别在于它加模块的方式是异步的。通过AMD这种形式定义模块的好处在于其模块加载是非阻塞性的，当执行到require 函数时并不会停下来去执行被加载的模块，而是继续执行require后面的代码这使得模块加载操作并不会阻塞浏览器。，也就是全局下是define函数，而通过AMD定义的模块是无法使用CommonJS 或ES6 Module的形式确引人的。

由上面的例子可以看出，ES6 Module的特性使其可以更好地支持循环依赖，只是需要由开发者来保证当导人的值被使用时已经设置好正确的导出值。，它不支持导人的路径是一个表达式并且导人、导出语句必须位于模块的顶层作用域，因此我们说，ES 6Module是一种静态的模块结构，一般来说工程中应该尽量避免循环依赖的产生，因为从软件设计的角度来说，单向的依赖关系更加清晰，而循环依赖则会带来一定的复杂度。CommonJS与ES6 Module最本质的区别在于前者对模块依赖的解决是“动态的”而后者是“静态的”。

模块之于程序，就如同细胞之于生物体，是具有特定功能的组成单元。不同的模块负责不同的工作，它们以某种方式联系在一起，共同保证程序的正常运转。随着 JavaScript语言的发展，社区中产生了很多模块标准。在认识这些标准的同时，也要了解其背后的思想。例如，它为什么会有这个特性，或者为什么要这样去实现。这对我们自己编写模块也会有所帮助。

js实现栈

Promise 的含义Promise 是异步编程的一种解决方案。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。Promise的特点对象的状态不受外界影响。Promise有三种状态：1. pending; 2. fulfilled; 3.rejected。除了异步操作，其他任何操作都不能改变此状态。

ECMAScript 总结简介ECMAScript中的变量无特定的类型，定义变量时只用var运算符每行结尾的分号可有可无，但为了保持良好的编程习惯，最好总是加入分号注释与 Java、C 和 PHP 语言的注释相同括号表示代码块ECMAScript中的变量并不一定要初始化。ECMAScript有5种原始类型（primitive type），即Undefined、Null、Boolean、Number和String。Undefined类型具有唯一的值，即undefined。当声明的变量未初始化时

1 避免定义全局变量或函数定义全局变量或函数，会影响代码的可维护性。如果在页面中运行的JavaScript代码是在相同的作用域里面，就意味着代码之间的定义存在互相影响的可能。如果另外一个开发者在不知道已定义这些变量和函数的情况下，也定义了相同名称的变量或函数，则后定义的函数或者方法会覆盖之前的定义。解决这个问题最简单的手段是把变量和方法封装在一个变量对象上，使其变成对象的属性，例如：var myCurrentAction = { length: 0, init: function(){...}