webpack中如何编写一个plugin
2024-08-27 04:51:00
loader和plugin有什么区别呢?什么是loader,什么是plugin。
当我们在源代码里面去引入一个新的js文件或者一个其他格式的文件的时候,这个时候,我们可以借助loader去帮我们处理引用的文件,这是loader的一个作用
当我们在做打包的时候,在某一些具体时刻上,比如打包结束后,我要自动生成一个html文件,这个时候就可以使用一个htmlwebpackplugin的插件, 比如在打包之前,要把dist目录清空,这个时候可以使用clearwebpackplugin。
首先新建一个项目plugin
npm init -y
npm install webpack webpack-cli --save-dev
新建文件夹src,index.js
index.js
console.log('hello world');
webpack.config.js
const path = require('path'); module.exports = {
mode: 'development',
entry: {
main: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
}
}
package.json
"scripts": {
"build": "webpack"
}
运行npm run build,运行完成。生成main.js。输出hello world。
我现在要做这样一个功能,打包完后在dist下面帮我自动生成一个版权信息的js。在根目录下新建一个文件夹叫做plugins。在新建一个js叫做copyright-webpack-plugin.js。插件的定义跟loader不一定,loader是一个函数,插件是一个类
copyright-webpack-plugin.js
class CopyrightWebpackPlugin {
constructor(){
console.log('插件被使用了')
}
apply(compiler) {
}
}
module.exports = CopyrightWebpackPlugin;
格式大概长成这个样子,所以每次定义一个插件的时候,都长这个样子。
接着我们要使用他,在webpack.config.js里面去使用他
const CopyRightWebpackPlugin = require('./plugins/copyright-webpack-plugin');
module.exports = {
plugins: [
/**
* 所以知道为什么插件要一个new,因为是一个类,用的时候需要new一下。
* new这个插件的时候,就使用了这个插件
*/
new CopyRightWebpackPlugin()
],
}
然后运行npm run build。发现控制台打印出了'插件被使用了'。确实使用了,但是什么没干。
这个时候在new 的时候传入参数。插件里面constructor就可以获取到了。
copyright-webpack-plugin.js
class CopyrightWebpackPlugin {
/**
* compiler是webpack的一个实例,这个实例存储了webpack各种信息,所有打包信息
* https://webpack.js.org/api/compiler-hooks
* 官网里面介绍了compiler里面有个hooks这样的概念
* hooks是钩子的意思,里面定义了时刻值
*/
apply(compiler) {
/**
* 用到了hooks,emit这个时刻,在输出资源之前,这里官网告诉我们是一个异步函数
* compilation是这一次的打包信息,所以跟compiler是不一样的
* tapAsync接受两个参数,第一个是名字,
*/
compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin',(compilation, cb)=>{
debugger;
compilation.assets['copyright.txt'] = {
source: function(){
return 'copyright by q'
},
size: function() {
return 15
}
};
// 最后一定要调用cb
cb();
})
/**
* 同步的时刻跟同步的时刻写代码的方式不一样
* 同步的时刻,后面只要一个参数就可以了
*/
compiler.hooks.compile.tap('CopyrightWebpackPlugin',(compilation) => {
console.log('compiler');
})
}
}
module.exports = CopyrightWebpackPlugin;
然后运行,dist下就生成了一个copyright.txt。里面是copyright by q。
这里有个疑问,我怎么知道compilation有assert这样的东西,这里有个debugger。
"scripts": {
"debug": "node --inspect --inspect-brk node_modules/webpack/bin/webpack.js",
"build": "webpack"
},
运行debug,就可以对插件进行调试,能够可视化对看见compilation下所有的信息。debug跟build是同样的一个东西,只不过debug可以在里面传入参数,比如--inspect表示打开调试
最新文章
- 聊聊 Apache 开源协议
- 由Memcached升级到 Couchbase的 Java 客户端的过程记录(三)
- Json字符串和Json对象的简单总结
- Jquery-EasyUI学习2~
- iOS系统提供开发环境下命令行编译工具:xcodebuild
- jQuery Validate 表单验证插件----自定义校验结果样式
- 百度编辑器 无法获取post过去的值
- 项目三(集团官网)——总结(1) cookie
- Fitness training
- Sonatype Nexus 搭建Maven 私服
- 问题:关于坛友的一个js轮播效果的实现
- TYPE C PD测试板 UFP测试板
- Bzoj 1046: [HAOI2007]上升序列 二分,递推
- 2-06. 数列求和(20)(ZJUPAT 数学)
- hdu1506——Largest Rectangle in a Histogram
- Elasticsearch中doc_value的认识
- C# typeof() 和 GetType()区别
- Vue2.0父子组件之间和兄弟组件之间的数据交互
- linux加载与使用ko驱动
- Map的四种遍历