webpack-编写plugin
当我们在做打包的时候，在某⼀些具体时刻，（如打包结束时⽣成⼀个html，使⽤HtmlWebpackPlugin；在打包之前，把dist⽬录清空，使⽤CleanWebpackPlugin）帮我们做⼀些事情。
1.初始化⼀个项⽬
2.新建plugins⽂件夹，下⾯新建copyright-webpack-plugin.js（plugin）:
class CopyrightWebpackPlugin{
constructor(){ // 构造⽅法
console.log('插件被使⽤了');
}
apply(compiler){ // 调这个插件时会执⾏apply⽅法，complier--webpack实例
}
}
fig.js:
plugins:[
new CopyrightWebpackPlugin()
]
4.进⾏打包，会发现输出--插件被使⽤了，说明我们的插件已经构造起来了
5.插件⾥⾯可以传递⼀些参数：
plugins:[
new CopyrightWebpackPlugin({
name:'hello world'
})
]
6.得到参数：
constructor(options){
console.log(options);
}
// 命令⾏会输出{name:'hello world'}
7.场景：在webpack打包结束，即将⽣成dist⽬录的时候额外增加⼀个的⽂件在官⽹中有⼀个plugin的（钩⼦）：我们需求的时刻就是emit时刻，这是个异步的时刻：compilation⾥⾯有个属性assets包含了打包⽣成的所有内容，所以我们的需求就可以在这⾥⾯做⽂章：
apply(compiler){
// compiler存放着配置的所有内容，包括打包的所有相关内容
// compilation存放的是跟这次打包相关的内容
it.tapAsync('CopyrightWebpackPlugin',(compilation,cb)=>{
console.log(123123);
cb();
})
}
  执⾏打包命令我们会发现输出了  123123
  compilation⾥⾯有个属性assets包含了打包⽣成的所有内容，所以我们的需求就可以在这⾥⾯做⽂章：
it.tapAsync('CopyrightWebpackPlugin',(compilation,cb)=>{
compilation.assets['']={
source:function(){
return 'copyright by jin goly'
},
size:function(){
return 21
}
}
cb();
})
  执⾏打包命令会发现dist⽬录下多出⼀个⽂件。同步时刻会有所差异，如compile:
compiler.hookspile.tap('CopyrightWebpackPlugin',compilation=>{
console.log('hello world');
});
8.使⽤node调试⼯具：
  在package.json中增加⼀个命令:
  "debug":"node --inspect --inspect-brk node_modules/webpack/bin/webpack.js",
  --inspect表⽰要开启node调试⼯具，
  --inspect-brk表⽰在webpack命令执⾏的时候在第⼀⾏打断点
  运⾏npm run debug后打开浏览器控制台，可以看到⼀个绿⾊图标，可点击进⼊调试那么当我们想要看compilation⾥⾯有什么东西的时候就可以打⼀个断点：
it.tapAsync('CopyrightWebpackPlugin',(compilation,cb)=>{
debugger;
compilation.assets['']={
source:function(){
return 'copyright by jin goly'
},
size:function(){
return 21
}
webpack打包流程 面试}
cb();
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。