Webpack系列——如何编写一个 Plugin

2022-05-13 12:03:06 阅读：181 来源： 互联网

标签：copyright Plugin compilation webpack js Webpack 编写 CopyrightWebpackPlugin compil

webpack.config.js

const path = require('path')
const CopyrightWebpackPlugin = require('./plugins/copyright-webpack-plugin')

module.exports = {
　　mode: 'development',
　　entry: {
　　　　main: './src/index.js'
　　},
　　plugins: [
　　　　　　new CopyrightWebpackPlugin({
　　　　　　name: 'pluginParams'
　　　　})
　　]
　　output: {
　　　　path: path.resolve(__dirname, 'dist'),
　　　　filename: '[name].js'
　　}
}

根目录创建 plugins 文件夹，在文件夹中创建一个 copyright-webpack-plugin.js 文件

注： loader 是一个函数(function)， plugin 是一个类(class)

copyright-webpack-plugin.js

class CopyrightWebpackPlugin {
　　constructor(options) {
　　　　console.log('插件被使用了, 传入的参数为：'， options)
　　}
　　// 参数 compiler 是 webpack 的一个实例
　　// compiler 存放着所有配置内容，包括所有打包的相关内容
　　// compiler.hooks 定义了打包过程中的时刻值（钩子）
　　// emit 时刻：将打包的资源输出到输出目录(dist) 前,是一个异步的时刻值
　　apply(compiler) {
　　　　// compile 时刻是同步的时刻
　　　　// 同步的时刻的参数中，第二个方法参数只传一个 compilation 参数
　　　　compiler.hooks.compile.tap('CopyrightWebpackPlugin', (compilation) => {
　　　　console.log('compiler')
　　})
　　　// compilation 存放着这一次打包的内容
　　compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin', (compilation, callback) => {
　　// 打包生成的内容存放在compilation.assets
　　// console.log(compilation.assets)
　　// 打包输出前添加一个 copyright.txt 文件
　　compilation.assets['copyright.txt'] = {
　　source: function() {
　　　　return 'copyright output by plugin'
　　}
　　size: function() {
　　　　return 26
　　}
};
　　// 使用 tapAsyns 时最后一定要调用一下 callback
　　callback()
　　})
　　}
}

module.exports = CopyrightWebpackPlugin;
对于 compilation 中拥有哪些属性，可以通过 node 额度调试工具查看

在 package.json 中

第一个参数 --inspect 表示开启 Node 调试工具，--inspect-brk在运行 webpack.js 进行调试时，在 webpack 执行时的第一行上打上断点

{
　　// ...
　　"script": {
　　"debug": "node --inspect --inspect-brk node_modules/webpack/bin/webpack.js"
}
}
class CopyrightWebpackPlugin {
　　constructor(options) {
　　console.log('插件被使用了, 传入的参数为：'， options)
}
　　apply(compiler) {
　　　　compiler.hooks.compile.tap('CopyrightWebpackPlugin', (compilation) => {
　　　　console.log('compiler')
})
compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin', (compilation, callback) => {
　　debugger;
　　compilation.assets['copyright.txt'] = {
　　source: function() {
　　return 'copyright output by plugin'
}
size: function() {
return 26
}
};
callback()
})
}
}

module.exports = CopyrightWebpackPlugin;
运行 npm run debbug 后可打开浏览器控制台，在 Node 调试工具中进行调试

此时可鼠标移动到需要查看的变量或方法中的变量进行查看，或者在右侧的 watch 中添加需要监测的变量查看。

搜索

复制

标签：copyright,Plugin,compilation,webpack,js,Webpack,编写,CopyrightWebpackPlugin,compil
来源： https://www.cnblogs.com/songfengyang/p/16266153.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Webpack系列——如何编写一个 Plugin