1.封装自定义的功能loader

(格式很简单,重点在于loader-utils,loaderUitls.getOptions可获取webpack配置rules中的options以供使用 )

这只是一个简单的替换路径loader,具体别的需求的loader就可以自己编写内容了

2.

compiler和compilation
// MyPlugin.js
function MyPlugin(options) {
this.options = options;
}
MyPlugin.prototype.apply = function(compiler) {
// ...
compiler.plugin('compilation', function(compilation) {
console.log('The compiler is starting a new compilation...');
compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {
htmlPluginData.html += 'The magic footer';
callback(null, htmlPluginData);
});
});
};
module.exports = MyPlugin;

事件: 通过执行下列事件来允许其他插件更改html: 异步事件: html-webpack-plugin-before-html-generation html-webpack-plugin-before-html-processing html-webpack-plugin-alter-asset-tags html-webpack-plugin-after-html-processing html-webpack-plugin-after-emit 同步事件: html-webpack-plugin-alter-chunks

配合htmlWebpackPlugin插件,给html中link标签加id

my-plugin.js

function MyPlugin(options) {
this.options = options;
}
MyPlugin.prototype.apply = function(compiler) {
compiler.plugin('compilation', function(compilation) {
compilation.plugin('html-webpack-plugin-alter-asset-tags', function(htmlPluginData, callback) {
if (htmlPluginData.head && htmlPluginData.head.length) {
htmlPluginData.head.forEach(item => {
if (item.attributes) {
let href = item.attributes.href;
item.attributes.id = href.substring(href.indexOf('css/') + 4, href.indexOf('.'));
}
});
}
callback(null, htmlPluginData);
});
});
};
module.exports = MyPlugin;

然后 webpack.config.js 中配置为:

let MyPlugin = require('./my-plugin.js')
// ...
plugins: [
new MyPlugin({options: ''})
]

webpack自定义loader和自定义插件的更多相关文章

  1. webpack 快速入门 系列 - 自定义 wepack 上

    其他章节请看: webpack 快速入门 系列 自定义 wepack 上 通过"初步认识webpack"和"实战一"这 2 篇文章,我们已经学习了 webpac ...

  2. vue从入门到进阶:自定义指令directive,插件的封装以及混合mixins(七)

    一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...

  3. APICloud框架--sublime使用自定义loader

    官方的apploader调试器,只是有官方的一些模块,如果我们使用非官方的模块就要使用自定义loader进行调试.接下来就走一边sublime设置自定义loader的步骤 修改config.xml 打 ...

  4. 自定义Loader

    自定义Loader涉及到的接口: public delegate byte[] CustomLoader(ref string filePath); public void LuaEnv.AddLoa ...

  5. 在webpack里使用jquery.mCustomScrollbar插件

    malihu-custom-scrollbar-plugin是一个依赖jquery的自定义网页滚动条样式插件 网站:http://manos.malihu.gr/jquery-custom-conte ...

  6. webpack的loader的原理和实现

    想要实现一个loader,需要首先了解loader的基本原理和用法. 1. 使用 loader是处理模块的解析器. module: { rules: [ { test: /\.css$/, use: ...

  7. webpack的loader和plugin的区别

    [Loader]:用于对模块源码的转换,loader描述了webpack如何处理非javascript模块,并且在buld中引入这些依赖.loader可以将文件从不同的语言(如TypeScript)转 ...

  8. webpack(9)plugin插件功能的使用

    plugin 插件是 webpack 的支柱功能.webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上! 插件目的在于解决 loader 无法实现的其他事. 常用的插件 ...

  9. activiti自定义流程之自定义表单(三):表单列表及预览和删除

    注:(1)环境配置:activiti自定义流程之自定义表单(一):环境配置 (2)创建表单:activiti自定义流程之自定义表单(二):创建表单 自定义表单创建成功,要拿到activiti中使用,自 ...

随机推荐

  1. sh_01_重复执行

    sh_01_重复执行 # 打印 500 遍 Hello Python(复制粘贴的方法,手动复制500次) print("Hello Python") print("Hel ...

  2. Pycharm,出现Invalid VCS root mapping The directory 解决方法

    Pycharm File 中setting-------version control  中VCS选择none  后选择ok 执行完以上的步骤,还错误就会消失.

  3. Linux安装部署FTP服务器

    Linux安装部署FTP服务器   本文章会将安装FTP服务器的步骤以及一些遇到的问题来记录下 因为项目中要与第三方对接数据,需要用到FTP服务器以提供他们每天上传数据,因为之前在本地的VMware虚 ...

  4. 题目1.A乘以B

    看我没骗你吧 —— 这是一道你可以在10秒内完成的题:给定两个绝对值不超过100的整数A和B,输出A乘以B的值. 1实验代码 #include<stdio.h>int main(void) ...

  5. leetcode 287寻找重复数

    这道题用STL容器就很好写了,可以用set也可以用map, 用unordered_map的C++代码如下: class Solution { public: int findDuplicate(vec ...

  6. 九:flask-response响应

    1.如果返回的是个合法的响应对象,则直接返回 同时,也可以在response里面做一些操作,比如增加cookie 2.如果返回的是一个字符串,那么flask会重新创建一个werkzeug,wrappe ...

  7. JVM监控工具之JVisualVM

    一.简介 JVisualVM是Netbeans的profile子项目,已在JDK6.0 update 7 中自带(bin/jvisualvm.exe),能够监控线程,内存情况,查看方法的CPU时间和内 ...

  8. 中国MOOC_零基础学Java语言_第6周 使用对象_2GPS数据处理

    2 GPS数据处理(5分) 题目内容: NMEA-0183协议是为了在不同的GPS(全球定位系统)导航设备中建立统一的BTCM(海事无线电技术委员会)标准,由美国国家海洋电子协会(NMEA-The N ...

  9. css之——div模拟textarea文本域的实现

    1.问题的出现: <textarea>标签为表单元素,但一般用于多行文本的输入,但是有一个明显的缺点就是不能实现高度自适应,内容过多就回出现滚动条. 为了实现高度自适应:用div标签来代模 ...

  10. Discrete Mathematics and Its Applications | 1 CHAPTER The Foundations: Logic and Proofs | 1.4 Predicates and Quantifiers

    The statements that describe valid input are known as preconditions and the conditions that the outp ...