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 中添加需要监测的变量查看。
复制
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。