![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack系列
从使用方法到原理分析,带你走进手写webpack的世界
rookieLink
月光皎洁,万物喜其滋润,盗贼恶其光明
展开
-
实现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 · 288 阅读 · 0 评论 -
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 · 1201 阅读 · 1 评论 -
实现内联插件——InlineSourcePlugin
实现webpack插件要安装 html-webpack-plugin@nextInlineSourcePlugin.js// 把外链的标签, 变成内联的标签let HtmlWebpackPlugin = require('html-webpack-plugin');class InlineSourcePlugin { constructor({match}) { ...原创 2020-02-28 22:47:49 · 638 阅读 · 0 评论 -
实现FileListPlugin插件
实现FileListPlugin插件FileListPlugin.jsclass FileListPlugin { constructor({filename}) { this.filename = filename; } apply(compiler) { // 文件已经准备好了,准备发射 compiler.hooks....原创 2020-02-28 22:44:56 · 180 阅读 · 0 评论 -
实现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 · 818 阅读 · 0 评论 -
实现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 · 287 阅读 · 0 评论 -
实现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 · 368 阅读 · 0 评论 -
webpack实现常用loader
概念:什么是loader?webpack只能处理javascript的模块,如果要处理其他类型的文件,需要使用loader进行转换,loader是webpack中的一个重要概念,它是指用来将一段代码转换成为另一段代码的webpack加载器原创 2020-02-28 22:24:02 · 186 阅读 · 0 评论 -
手写webpack——实现plugins的功能
手写webpack实现plugins功能原创 2020-02-28 22:21:11 · 383 阅读 · 0 评论 -
手写webpack——实现loader的功能
手写webpack之实现loader的加载原创 2020-02-28 22:18:07 · 521 阅读 · 0 评论 -
手写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 · 203 阅读 · 1 评论 -
分析webpack中使用的Tapable——异步钩子实现及模拟实现
tapablewebpack本质上是一种事件流的机制,他的工作流程就是将各个插件串联起来,而实现这一切的核心就是tapable,tapable有点类似于nodejs的events库,核心原理也是依赖于发布订阅模式:继承了很多插件,同步的和异步的tapable库中有3中注册方法 tap(同步注册)、tabAsync(回调cb)、tabPromise(注册是promise)调用的三种方法 c...原创 2020-02-28 22:08:52 · 518 阅读 · 0 评论 -
分析webpack中使用的Tapable——同步钩子实现及模拟实现
tapablewebpack本质上是一种事件流的机制,他的工作流程就是将各个插件串联起来,而实现这一切的核心就是tapable,tapable有点类似于nodejs的events库,核心原理也是依赖于发布订阅模式:继承了很多插件,同步的和异步的tapable库中有3中注册方法 tap(同步注册)、tabAsync(回调cb)、tabPromise(注册是promise)调用的三种方法 ...原创 2020-02-28 22:05:07 · 231 阅读 · 0 评论 -
webpack热更新
webpack有时候只有更新某个模块的时候,只更新该部分,不刷新页面,是一种增量的更新原创 2020-02-28 22:02:21 · 151 阅读 · 0 评论 -
webpack懒加载
通过使用@babel/plugin-syntax-dynamic-import插件,实现webpack打包懒加载功能原创 2020-02-28 21:57:38 · 152 阅读 · 0 评论 -
webpack抽取公共代码
不同地方多次引用同一个资源的时候,使用webpack将资源进行抽离原创 2020-02-28 21:53:25 · 324 阅读 · 0 评论 -
webpack中自带的打包优化
webpack中会自带一些优化原创 2020-02-28 21:48:43 · 142 阅读 · 0 评论 -
webpack打包动态链接库DDLPlugin
webpack不重复打包某些不会变动的文件及第三方库,加快我们的打包速度使用webpack的DllPlugin和DllReferencePlugin插件原创 2020-02-28 21:44:59 · 730 阅读 · 0 评论 -
webpack忽略依赖加载
有的模块我们打包时不需要进行加载,使用webpack自带的ignorePlugin进行忽略原创 2020-02-28 20:51:55 · 1326 阅读 · 0 评论 -
webpack忽略解析(noParse)
有些模块我们知道不会依赖第三方模块,所以在打包的时候不需要再进行解析,所以要配置忽略解析,提高我们的打包速度原创 2020-02-28 20:48:09 · 1266 阅读 · 0 评论 -
webpack区分不同环境下的打包方式
使用webpack-merge来区分webpack在不同环境下进行打包,比如生产环境和开发环境的配置不同,则需要进行不同的配置进行打包,而不想重写共用的部分原创 2020-02-28 20:43:46 · 830 阅读 · 0 评论 -
webpack定义环境变量
使用webpack定义环境变量,供全局使用原创 2020-02-28 20:39:27 · 784 阅读 · 0 评论 -
webpack配置resolve属性
配置webpack的resolve属性,实现第三方包的解析原创 2020-02-28 20:36:04 · 473 阅读 · 0 评论 -
webpack处理跨域问题
使用多种方式解决webpack的跨域问题原创 2020-02-28 20:31:46 · 373 阅读 · 0 评论 -
webpack常见小插件使用
webpack常用插件使用,包括clean-webpack-plugin、copy-webpack-plugin、BannerPlugin等插件使用原创 2020-02-28 20:19:05 · 116 阅读 · 0 评论 -
webpack进行实时打包-watch
webpack通过设置watch进行文件实时打包,改过代码立即打包一份实体文件出来原创 2020-02-28 20:15:06 · 417 阅读 · 0 评论 -
webpack配置source-map
webpack配置source-map进行源码映射原创 2020-02-28 20:12:31 · 1000 阅读 · 0 评论 -
webpack打包多应用
webpack打包多应用,多出口文件原创 2020-02-28 20:02:19 · 114 阅读 · 0 评论 -
webpack打包文件分类
加上outPath属性module.exports = { module: { rules: [ { test: /\.png/, // use: 'file-loader' use: 'url-loader', opti...原创 2020-02-28 12:12:46 · 548 阅读 · 0 评论 -
webpack打包图片
使用webpack进行不同情况下的图片打包原创 2020-02-28 12:11:42 · 149 阅读 · 0 评论 -
webpack全局变量引入
使用webpack来处理全局变量引入问题原创 2020-02-28 12:07:42 · 1406 阅读 · 0 评论 -
webpack处理js语法及校验
webpack使用eslint进行所写代码的语法校验,不符合语法校验的打包会失败原创 2020-02-28 11:58:24 · 359 阅读 · 0 评论 -
webpack转换es6语法(babel)
使用babel-loader搭配相关插件来进行es6的语法转换原创 2020-02-28 11:51:52 · 246 阅读 · 0 评论 -
webpack处理样式
使用webpack来进行css样式处理,包括导出单个css文件、生成行内样式。也可以对css进行样式优化,压缩代码,使用autoprefixer给属性加前缀以兼容浏览器等原创 2020-02-28 11:45:32 · 203 阅读 · 0 评论 -
使用html-webpack-plugin插件
使用html-webpack-plugin插件打包首先安装html-webpack-plugin插件, 用于打包html文件yarn add html-webpack-plugin -D原创 2020-02-28 11:28:27 · 233 阅读 · 0 评论 -
分析webpack打包出来的代码
我们来看一下webpack打包出来的代码到底是什么样子:其中我删除了一部分与业务逻辑无关的代码,便于观看,我对各个部分做了细节注释:(function(modules) { // webpackBootstrap // The module cache 先定义一个缓存 var installedModules = {}; // The require function ...原创 2020-02-28 11:23:56 · 326 阅读 · 0 评论 -
webpack系列介绍
webpack可以做的事情:代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布需要提前掌握的内容:node基础、以及npm使用掌握es6语法最终掌握的webpack技能:常见配置高级配置优化策略ast抽象树webpack中的tapable掌握webpack流程,手写webpack手写常见的loader手写常见的pluginwebpack安装:...原创 2020-02-28 11:09:09 · 150 阅读 · 0 评论