- 博客(38)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 webpack打包后自动发布插件UploadPlugin（以上传到七牛网为例）
打包后自动发布UploadPlugin.jsclass UploadPlugin { constructor(options) { let {bucket = '', domain = '', accessKey = '', secretKey = ''} = options; let mac = new qiniu.auth.digest.Mac(ac...
2020-02-28 22:49:12
1185
1
原创 实现内联插件——InlineSourcePlugin
实现webpack插件要安装 [email protected]// 把外链的标签， 变成内联的标签let HtmlWebpackPlugin = require('html-webpack-plugin');class InlineSourcePlugin { constructor({match}) { ...
2020-02-28 22:47:49
623
原创 实现FileListPlugin插件
实现FileListPlugin插件FileListPlugin.jsclass FileListPlugin { constructor({filename}) { this.filename = filename; } apply(compiler) { // 文件已经准备好了，准备发射 compiler.hooks....
2020-02-28 22:44:56
171
原创 实现css-loader、less-loader、style-loader
less-loaderless-loader.jslet less = require('less');function loader(source) { let css; less.render(source, function (err, r) { // r.css css = r.css; }); return css;}module...
2020-02-28 22:42:11
804
原创 实现file-loader与url-loader
file-loader实现file-loader.js:let loaderUtils = require('loader-utils');function loader(source) { let filename = loaderUtils.interpolateName(this, '[hash].[ext]', {content: source}); this.em...
2020-02-28 22:34:28
276
原创 实现webpack的banner-loader
banner-loader实现banner-loader.jslet loaderUtils = require('loader-utils');let validateOptions = require('schema-utils');let fs = require('fs');function loader(source) { let options = loaderUt...
2020-02-28 22:29:46
351
原创 实现webpack的babel-loader
实现babel-loaderbabel-loader:let babel = require('@babel/core'); let loaderUtils = require('loader-utils'); function loader(source) { // this loaderContext let options = loaderUtils.getOption...
2020-02-28 22:26:27
276
原创 webpack实现常用loader
概念：什么是loader？webpack只能处理javascript的模块，如果要处理其他类型的文件，需要使用loader进行转换，loader是webpack中的一个重要概念，它是指用来将一段代码转换成为另一段代码的webpack加载器
2020-02-28 22:24:02
174
原创 手写webpack
手写webpack我们来手动实现一个简易的webpack， zf-pack开发方式新建一个仓库，然后执行npm link即可在需要构建的项目下面，执行npm link zf-packpackage.json配置{ "name": "zf-pack", "version": "1.0.0", "main": "index.js", "license": "MIT",...
2020-02-28 22:12:21
191
1
原创 分析webpack中使用的Tapable——异步钩子实现及模拟实现
tapablewebpack本质上是一种事件流的机制，他的工作流程就是将各个插件串联起来，而实现这一切的核心就是tapable，tapable有点类似于nodejs的events库，核心原理也是依赖于发布订阅模式：继承了很多插件，同步的和异步的tapable库中有3中注册方法 tap(同步注册)、tabAsync(回调cb)、tabPromise(注册是promise)调用的三种方法 c...
2020-02-28 22:08:52
484
原创 分析webpack中使用的Tapable——同步钩子实现及模拟实现
tapablewebpack本质上是一种事件流的机制，他的工作流程就是将各个插件串联起来，而实现这一切的核心就是tapable，tapable有点类似于nodejs的events库，核心原理也是依赖于发布订阅模式：继承了很多插件，同步的和异步的tapable库中有3中注册方法 tap(同步注册)、tabAsync(回调cb)、tabPromise(注册是promise)调用的三种方法 ...
2020-02-28 22:05:07
222
原创 webpack打包动态链接库DDLPlugin
webpack不重复打包某些不会变动的文件及第三方库，加快我们的打包速度使用webpack的DllPlugin和DllReferencePlugin插件
2020-02-28 21:44:59
712
原创 webpack忽略解析（noParse）
有些模块我们知道不会依赖第三方模块，所以在打包的时候不需要再进行解析，所以要配置忽略解析，提高我们的打包速度
2020-02-28 20:48:09
1232
原创 webpack区分不同环境下的打包方式
使用webpack-merge来区分webpack在不同环境下进行打包，比如生产环境和开发环境的配置不同，则需要进行不同的配置进行打包，而不想重写共用的部分
2020-02-28 20:43:46
818
原创 webpack常见小插件使用
webpack常用插件使用，包括clean-webpack-plugin、copy-webpack-plugin、BannerPlugin等插件使用
2020-02-28 20:19:05
111
原创 webpack打包文件分类
加上outPath属性module.exports = { module: { rules: [ { test: /\.png/, // use: 'file-loader' use: 'url-loader', opti...
2020-02-28 12:12:46
535
原创 webpack处理样式
使用webpack来进行css样式处理，包括导出单个css文件、生成行内样式。也可以对css进行样式优化，压缩代码，使用autoprefixer给属性加前缀以兼容浏览器等
2020-02-28 11:45:32
196
原创 使用html-webpack-plugin插件
使用html-webpack-plugin插件打包首先安装html-webpack-plugin插件， 用于打包html文件yarn add html-webpack-plugin -D
2020-02-28 11:28:27
215
原创 分析webpack打包出来的代码
我们来看一下webpack打包出来的代码到底是什么样子：其中我删除了一部分与业务逻辑无关的代码，便于观看，我对各个部分做了细节注释：(function(modules) { // webpackBootstrap // The module cache 先定义一个缓存 var installedModules = {}; // The require function ...
2020-02-28 11:23:56
318
原创 webpack系列介绍
webpack可以做的事情：代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布需要提前掌握的内容：node基础、以及npm使用掌握es6语法最终掌握的webpack技能：常见配置高级配置优化策略ast抽象树webpack中的tapable掌握webpack流程，手写webpack手写常见的loader手写常见的pluginwebpack安装：...
2020-02-28 11:09:09
142
原创 js加载时间线
js加载时间线如果对async和defer不了解的，请参考另一篇博文《异步加载js文件》1、创建document对象，开始解析web页面，解析html元素和他们的文本内容后添加element对象和text节点到文档中，阶段document.readyState = ‘loading’.2、遇到link外部css，创建线程加载，并继续解析文档。3、遇到script外部js，并且...
2020-02-05 13:51:28
123
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人