当你开始用 JavaScript 进行开发时，可能学到的第一件事就是如何用 console.log 将内容记录到控制台。如果你去搜索如何调试 JavaScript，会发现数百篇博文和 StackOverflow 文章都会简单的告诉你用 console.log。因为这是一种很常见的做法，我们甚至会在代码中使用像 no-console 这样的 linter 规则来确保不会留下意外的日志信息。但是如果我们真的想要去记录某些内容呢？
1.修改控制台输出内容样式 2.重写控制台输出格式(追加出错日期) 3.以表格的形式显示控制台输出内容 4.如何统计一个函数在程序中被调用的总次数 5.以便于阅读的形式输出打印内容 6.统计程序执行的时间 7.分组显示控制台输出内容 8.获取当前代码在堆栈中的调用路径 9.清除控制台显示的所有内容 10.断言输出
文件的hash指纹通常作为前端静态资源实现增量更新的方案之一，Webpack是目前最流行的开源编译工具之一，其强大的功能也带来很多坑（当然，大部分麻烦其实都可以在官方文档中找到答案）。 比如，在Webpack编译输出文件的配置过程中，如果需要为文件加入hash指纹，Webpack提供了两个配置项可供使用：hash和chunkhash。那么两者有何区别呢？其各自典型的应用场景又是什么？本文结合笔者工作中遇到的问题，简单记录一下以上问题的解决方案。 1. hash与chunkhash 首先我们先看一下官方文档对
如果看官是个新手的话，看到上面的输出结果，肯定一脸懵逼的，但是没关系，看完这篇文章您就懂了。想完全明白上面这道题目，还需要了解JS的两个概念，没错，就是宏任务和微任务。
（3）可以将js代码编写到外部js文件中，然后通过script标签引入（☆☆☆） 优点：写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制。 注意：script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略 如果需要则可以在创建一个新的script标签用于编写内部代码。
webpack是前端模块化打包工具，它把一切都看成模块，比如css、js、图片文件等都可以看成模块，再通过一些loader（加载器）和plugin（插件）对资源进行处理，打包成符合生产环境的前端资源。
从开发文件到生产文件 有一天我突然意识到一个问题，在使用react框架搭建应用时，我使用到了sass/less，JSX模版以及ES6的语法在编辑器下进行开发，使用这些写法是可以提高开发的效率。可是浏览
有一天我突然意识到一个问题，在使用react框架搭建应用时，我使用到了sass/less，JSX模版以及ES6的语法在编辑器下进行开发，使用这些写法是可以提高开发的效率。可是浏览器它本身是并不能够“理解”这些语法的呀。就像下面这张图：
何时: 凡是HTML和CSS做出的静态页面，都要用JavaScript添加交互行为后，才能给用户使用
当你开始使用 JavaScript 做开发时，你可能学习到的第一件事情就是如何使用 console.log 将内容打印到控制台。如果你搜索如何调试 JavaScript，你会发现数百个博客文章和 StackOverflow 的文章都指向简单的 console.log 。因为这是一种常见的做法，我们甚至可以使用 no-console 这样的规则来确保生产环境不会留下日志。但是，如果我们真的想要记录这些信息呢？
document.write()方法可以用在两个方面：页面载入过程中用实时脚本创建页面内容，以及用延时脚本创建本窗口或新窗口的内容。该方法需要一个字符串参数，它是写到窗口或框架中的HTML内容。这些字符串参数可以是变量或值为字符串的表达式，写入的内容常常包括HTML标记语言。 记住，在载入页面后，浏览器输出流自动关闭。在此之后，任何一个对当前页面进行操作的document.write()方法将打开—个新的输出流，它将清除当前页面内容(包括源文档的任何变量或值)。因此，假如希望用脚本生成的HTML替换当前页面，就必须把HTML内容连接起来赋给一个变量，使用一个document.write()方法完成写操作。不必清除文档并打开一个新数据流，一个document.write()调用就可完成所有的操作。 关于document.write()方法还有一点要说明的是它的相关方法document.close()。脚本向窗口(不管是本窗口或其他窗口)写完内容后，必须关闭输出流。在延时脚本的最后一个document.write()方法后面，必须确保含有document.close()方法，不这样做就不能显示图像和表单。并且，任何后面调用的document.write()方法只会把内容追加到页面后，而不会清除现有内容来写入新值。
现在大多数单页应用的视图都是通过 JavaScript代码在浏览器端渲染出来的，但在浏览器端渲染的坏处有：
1.echo（常用）//可同时输出多个字符串 eg：echo $a,"hello";
随着Ajax的越来越多地运用，HTML的内容又开始由“所见即所得”开始向“所见未必所得”发展了。这就是动态改变网页内容的魅力所在吧。 在公司产品动易2006版整合接口的开发过程中，需要在客户端页面上输出一段调用远程接口写cookies的代码，最早的时候我是把调用url通过script的方式输出。在ASP输出HTML的时候，调试通过。 动易2006的前台登陆表单已经采用了Ajax技术，页面上所看到的登陆表单并非直接由HTML代码在页面中写成，而是在页面加载以后，通过JS，通过Ajax，向服务器端的asp
前言：很多博友不仔细看完内容就直接认为用 iframe 不好之类的云云，而实际上本文就是教你在必须使用 iframe 的时候，该如何躲过搜索引擎的抓取，避免不利于 SEO 的情况！ 那么，何为“必须要用 iframe 的时候”？我举个简单的例子：一些主题分享网站，很多时候会使用 iframe 框架调用主题作者的网站来做主题演示，这时候就会产生大量的 iframe 框架，那么本文的方法就可以派上用场了！ 导读：了解一点 seo 的站长，应该都知道爬虫都不喜欢 iframe 或 frame，因为蜘蛛访问一个网址
Webpack 4 给我们带来了一些变化。其中包括更快地打包，引入了SplitChunksPlugin，并淘汰掉之前的CommomsChunksPlugin。在本文，你将学习如何拆分输出代码以提高应用的性能。
[前言]:因为最近在搞****API的时候用到了webpack的externals，才发现我之前都只是用webpack做一些搭建完项目后的“收尾工作”——即打包，而没有把它纳入到项目开发的“主体过程”
JavaScript⼀种直译式脚本语⾔，是⼀种动态类型、弱类型、基于原型的语⾔，内置⽀持类型Javascript是当今最流⾏的脚本语⾔，我们⽣活中看到的⽹⻚和基于html5的app⾥⾯的交互逻辑都是由javascript驱动的⼀句话概括就是javascript是⼀种运⾏在浏览器中的解释型的编程语⾔
webpack打包原理 1、把一切都视为模块：不管是 CSS、JS、Image 还是 HTML 都可以互相引用，通过定义 entry.js，对所有依赖的文件进行跟踪，将各个模块通过 loader 和 plugins 处理，然后打包在一起。 2、按需加载：打包过程中 Webpack 通过 Code Splitting 功能将文件分为多个 chunks，还可以将重复的部分单独提取出来作为 commonChunk，从而实现按需加载。把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载 3、webpack.config.js的配置
不过大概了解了一点内容。感觉webpack一个打包工具非常类似于一个编译器，将一个文件，转换为另外一个文件。
上一期堡堡给大家分享了操作符与数据类型转换。掌握JS操作符的目的是为了能够灵活的操作变量，以便完成JS的各种逻辑处理；掌握数据类型转换可以让我们避免一些不该发生的问题，能够让我们更好的完成JS的各种功能。如果想具体了解操作符与数据类型转换，可以查看：操作符与数据类型转换。而今天我们主要讲解JS逻辑和DOM的结合 - JS设置标签的内容和样式。 Tips：由于上一期的文章篇幅过长，微信的文章有字数要求，所以小编把部分的内容（操作符）放到这一期进行讲解。 继上一期的内容 - 操作符 赋值操作符：=(赋值) +
webpack 是代码编译工具，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具，俗称: 打包工具
xargs命令有两个要点。第一，你必须列出目标文件。第二，你必须指定对每个文件需要执行的命令或脚本。
作者介绍：Marsboy，现就职于腾讯游戏增值服务部，负责AMS游戏营销平台的前端开发工作。
webpack是一个工具，是一个致力于做前端构建的工具。简单的理解：webpack就是一个模块打包机器，它可以将前端的js代码(不管ES6/ES7)、引用的css资源、图片资源、字体资源等各种资源进行打包整合，最后按照预设规则输出到一个或多个js模块文件中，并且可以做到兼容浏览器运行。图1-1是一个经典的阐述webpack是什么的一张官方图。
接着新增 src/index.js 和 src/util.js 和rollup.config.js 三个文件，目录结构如下所示:
webpack是一个打包模块化 JavaScript 的工具，在 webpack里一切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。webpack专注于构建模块化项目。
Webpack 入门 **Tip:** 本文所有示例基于 webpack2。 文中的示例代码说明可以参考：Webpack 示例代码说明 安装 本地安装 $ npm install --save-
ECMAScript（前身为欧洲计算机制造商协会）：JavaScript的语法规范
Rollup是一款基于ESModule模块规范实现的JavaScript打包工具，在前端社区中赫赫有名，同时也在Vite的架构体系中发挥着重要作用。不仅是Vite生产环境下的打包工具，其插件机制也被Vite所兼容，可以说是Vite的构建基石。
2.BOM: (browser object model)浏览器对象模型，提供了一套操作浏览器的API如：打开关闭浏览器窗口，前进go1后退(go-1)
在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。
中的所有 标签对应的跳转网页中的所有 title的文字内容，最后放到一个数组中。
在 《p5.js 光速入门》 中都是使用 CDN 的方式去使用 p5.js 的，不太符合当下的开发习惯。
在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条webpack机制中，去改变webpack的运作，使得整个系统扩展性良好
Node.js中的一个重要概念是依赖关系管理。本文就将带大家了解依赖管理的各种模式以及Node.js如何加载依赖。 Node.js编写模块化代码非常简单，我们可以使用单个js文件非模块化的编写所有应用程序的内容。 在这里你可能会问，模块（module）是什么，它又有什么作用。 大型项目的实施之中，会有很多分工协作，为了可以让分工更加方便和顺利，我们可以将编写好的代码封装起来，重复使用或者提供给第三方使用。在项目封装阶段将所有模块组织编译成一个完整程序。 总而言之，模块是代码为了便于在开发中共享和重用，而进行的分组。这些模块使我们可以将复杂的应用程序分解。以便让我们更好地理解代码，发现并修复Bug。基于CommonJS，Node.js中使用require这个关键字来获取一个JavaScript文件。
1 /** 2 * npm install log4js 3 * 源码及文档地址：https://github.com/nomiddlename/log4js-node 4 */ 5 var log4js = require('log4js'); 6 7 /** 8 * 第一种： 9 * configure方法为配置log4js对象，内部有levels、appenders、categories三个属性 10 * levels: 11 *
入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。
Node.js是一个流行的开源运行时环境，可以使用V8 JavaScript引擎在浏览器外部执行JavaScript，该引擎与用于支持Google Chrome Web浏览器JavaScript执行的引擎相同。 Node运行时通常用于创建命令行工具和Web服务器。
目录 1. 设置vue模板 2. vue语法--插值操作 3. 动态绑定属性--v-bind 一. 设置vue模板 我们经常新建一个vue项目的时候, 会写如下的一段代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {{message}} <script src="../js/vue.js">
对于一份同逻辑的代码，当我们手写了一个个的文件，它们无论是 ESM 还是 commonJS 或是 AMD，他们都是 module； 当我们写的 module 源文件传到 webpack 进行打包时，webpack 会根据文件引用关系生成 chunk 文件，webpack 会对这个 chunk 文件进行一些操作； webpack 处理好 chunk 文件后，最后会输出 bundle 文件，这个 bundle 文件包含了经过加载和编译的最终源文件，所以它可以直接在浏览器中运行。 一般来说一个 chunk 对应一个 bundle，比如上图中的 utils.js -> chunks 1 -> utils.bundle.js；但也有例外，比如说上图中，我就用 MiniCssExtractPlugin 从 chunks 0 中抽离出了 index.bundle.css 文件。
one day {dotted startColor="#ff6c6c" endColor="#1989fa"/}
本文转载于：https://mp.weixin.qq.com/s/8qP_xFMyDnzbqYHMcf75aQ
静态站点生成SSG - Static Site Generation是一种在构建时生成静态HTML等文件资源的方法，其可以完全不需要服务端的运行，通过预先生成静态文件，实现快速的内容加载和高度的安全性。由于其生成的是纯静态资源，便可以利用CDN等方案以更低的成本和更高的效率来构建和发布网站，在博客、知识库、API文档等场景有着广泛应用。
前两篇的博客中提及，webpack主要作用是对 解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，那么我们就要对资源处理的流程有一个了解。各个流程如下：
打包工具的角色 所谓打包工具在web开发中主要解决的问题是： （1）文件依赖管理。毕竟现在都是模块化开发，打包工具首先就是要梳理文件之间的依赖关系。 （2）资源加载管理。web本质就是html、js和
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
