背景

  1. webpack的使用中我们会遇到各种各样的插件、loader。
  2. webpack的功力主要体现在能理解各个插件、loader的数量上。理解的越多功力越深

开始

https://webpack.docschina.org/api/compilation-hooks/

https://webpack.docschina.org/api/compiler-hooks/

http://www.icodebang.com/article/232889

  1. 开发一个自定义的插件HelloWordPlugin
//HelloWordPlugin.js
const { Compilation } = require("webpack");
class HelloWorldPlugin {
constructor() {}
apply(compiler) {
console.log(compiler);
let outputFileName = compiler.options.output.filename
compiler.hooks.thisCompilation.tap("HelloWorldPlugin", (compilation) => {
console.log(compilation);
// debugger compilation.hooks.processAssets.tap(
{
name: "HelloWorldPlugin",
stage: Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING,
additionalAssets: true,
},
(assets) => {
assets[outputFileName]._source._children.forEach((item, i) => {
if (
typeof item === "string" &&
item.indexOf("var __webpack_exports__") === 0
) {
assets[outputFileName]._source._children[i] = item +=
"var HelloInjectCode = {}; \n";
}
});
}
);
});
}
}
module.exports = HelloWorldPlugin;

//测试主文件,主要加载创建webpack 配置、实例、执行

//index.js
const webpack = require("webpack");
const path = require("path");
const HelloWorldPlugin = require("./HelloWorldPlugin");
const config = {
context: path.resolve(__dirname),
mode: "production",
optimization: {
minimize: false,
},
entry: "./main.js",
target: ["web", "es5"],
output: {
filename: "bundle.js",
path: path.resolve(__dirname,"dist"),
},
plugins: [new HelloWorldPlugin()],
}; const compiler = webpack(config);
compiler.run((err, stats) => {
console.log(err);
console.log(
stats.toJson({
files: true,
assets: true,
chunk: true,
module: true,
entries: true,
})
);
});
  1. 两个项目文件,基本还是之前的例子
//main.js
import { max, PI1,PI3 } from "../webpack-modules/index";
!(function () {
console.log(max(1, 2), PI1,PI3);
})();
//../webpack-modules/index
let PI1 = 3.1415926;
let PI2 = 3.1415926; function max(a, b) {
return a > b ? a : b;
}
console.log(PI2);
export { max, PI1 };
  1. 生成的文件
//dist/bundle.js
/******/ (function() { // webpackBootstrap
/******/ "use strict";
/******/ // The require scope
/******/ var __webpack_require__ = {};
/******/
/************************************************************************/
/******/ /* webpack/runtime/define property getters */
/******/ !function() {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = function(exports, definition) {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ !function() {
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ }();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ !function() {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ }();
/******/
/************************************************************************/
var __webpack_exports__ = {};
var HelloInjectCode = {}; // NAMESPACE OBJECT: ../webpack-modules/index.js
var webpack_modules_namespaceObject = {};
__webpack_require__.r(webpack_modules_namespaceObject);
__webpack_require__.d(webpack_modules_namespaceObject, {
"X": function() { return PI1; },
"F": function() { return max; }
}); ;// CONCATENATED MODULE: ../webpack-modules/index.js
let PI1 = 3.1415926;
let PI2 = 3.1415926; function max(a, b) {
return a > b ? a : b;
}
console.log(PI2); ;// CONCATENATED MODULE: ./main.js !(function () {
console.log(max(1, 2), PI1,webpack_modules_namespaceObject.PI3);
})(); /******/ })()
;

总结

  1. 使用compilation.hooks.processAssets可以处理生成的资源
  2. 多看文档
  3. 开发插件,相当于是开发一个nodejs的工程,文件入口(测试验证用)可以直接使用webpackAPI ,参考index.js
  4. compiler更多面向编译配置,compilation更多面向编译是的资源,更多体现在watch上,每次watch或生成一个compilation
  5. 该插件向入口代码中插入了自定义的代码。一行helloworld,千言万语尽在不言中

【前端必会】webpack 插件,前进路绕不过的障碍的更多相关文章

  1. 【前端必会】不知道webpack插件? webpack插件源码分析BannerPlugin

    背景 不知道webpack插件是怎么回事,除了官方的文档外,还有一个很直观的方式,就是看源码. 看源码是一个挖宝的行动,也是一次冒险,我们可以找一些代码量不是很大的源码 比如webpack插件,我们就 ...

  2. 大前端工程化之写一个简单的webpack插件

    今天写一个简单的webpack插件,来学习一下webpack插件 webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化 首先我们得知道一个 ...

  3. 前端必学内容:webpack3快速入门 1-23节内容参考

    前端必学内容:webpack(模块打包器) webpack3 学习内容,点击即可到达 (1).webpack快速入门——如何安装webpack及注意事项 (2).webpack快速入门——webpac ...

  4. 高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui

    接上篇 接上篇<高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间> 本文围绕着实现EasyDSS高性能流 ...

  5. 【Web】阿里icon图标webpack插件(webpack-qc-iconfont-plugin)详解

    webpack-qc-iconfont-plugin webpack-qc-iconfont-plugin是一个webpack插件,可以轻松地帮你将阿里icon的图标项目下载至本地 开发初衷 之前已经 ...

  6. 【前端构建】WebPack实例与前端性能优化

    计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给前端优化工作带来的便利. 壹 | Fisrt 曾几 ...

  7. 前端模块化工具-webpack

    详解前端模块化工具-webpack webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不 ...

  8. Sublime Text 3前端开发常用优秀插件介绍

    . 首页 博客园 联系我 前言:关于Sublime Text 3. Package Control插件管理. Package Control使用方法/安装Emmet插件. Emmet插件. JsFor ...

  9. 探寻 webpack 插件机制

    webpack 可谓是让人欣喜又让人忧,功能强大但需要一定的学习成本.在探寻 webpack 插件机制前,首先需要了解一件有意思的事情,webpack 插件机制是整个 webpack 工具的骨架,而 ...

随机推荐

  1. 分享一个基于Abp Vnext开发的API网关项目

    这个项目起源于去年公司相要尝试用微服务构建项目,在网关的技术选型中,我们原本确认了ApiSix 网关,如果需要写网关插件需要基于Lua脚本去写,我和另外一个同事当时基于这个写了一个简单的插件,但是开发 ...

  2. 面试突击68:为什么 TCP 需要 3 次握手?

    TCP 三次握手是一道经典的面试题,它是指 TCP 在传递数据之前,需要进行 3 次交互才能正式建立起连接,并进行数据传递. TCP 之所以需要 3 次握手是因为 TCP 双方都是全双工的.所谓全双工 ...

  3. 操作表查询&操作表创建&操作表删除&操作表修改

    2.操作表 C(create):创建 语法: create table 表明( 列名1 数据类型1, 列名2 数据烈性2, .... 列名n 数据类型n ); create table Student ...

  4. 面试题:Java中为什么只有值传递?

    作者:小牛呼噜噜 | https://xiaoniuhululu.com 计算机内功.JAVA底层.面试相关资料等更多精彩文章在公众号「小牛呼噜噜 」 目录 经典的问题 形参&实参 Java是 ...

  5. spring boot实现不同生产环境下的文件配置

    配置不同生产环境 本文适用于开发环境下需要打包项目至生产环境,避免开发环境的配置文件泄露. 设置maven 作用:1. 手动调节运行时的不同环境 2. 打包时可以不会有其它环境的文件 注:每次换环境前 ...

  6. MySQL sql优化(摘抄自文档)

    前言 有人反馈之前几篇文章过于理论缺少实际操作细节,这篇文章就多一些可操作性的内容吧. 注:这篇文章是以 MySQL 为背景,很多内容同时适用于其他关系型数据库,需要有一些索引知识为基础. 优化目标 ...

  7. React报错之Property 'X' does not exist on type 'HTMLElement'

    正文从这开始~ 总览 在React中,当我们试图访问类型为HTMLElement 的元素上不存在的属性时,就会发生Property 'X' does not exist on type 'HTMLEl ...

  8. benchmark性能测试

    目录 benchmark介绍 benchmark运行 benchmark运行参数 benchmark性能测试案例 benchmark介绍 基准测试主要是通过测试CPU和内存的效率问题,来评估被测试代码 ...

  9. 完成 DolphinScheduler 新手任务赢好礼活动 | 倒计时3 天

    想轻松参与 DolphinScheduler 项目贡献吗? 想获得 500 元京东购物卡吗? 参与活动,有机会得更多活动奖励! 活动截止至6月30日 了解更多详情: 在你参与 DolphinSched ...

  10. 如何在BI中增加“路线地图”并进行数据分析?

    随着客户的需求越来越"百变",最近在做大屏设计的葡萄陷入了困境. 近期客户提出的需求是想在BI工具中增加 "路线地图"展示功能并进行数据分析. 不仅如此,这个& ...