webpack知识碎片

1.webpack 有一种万物皆对象，打破了离散的文件引用，以前除去一个文件要改两三处地方，webpack把相同作用的东西归纳整理到一块了
2.webpack构建了一个依赖树的关系，可以将任何资源转化成JavaScript对象，然后递归这个依赖树，得到对象后根据不同的loader重新转化为原来的数据，没有loader，打包后的资源文件没有办法去加载
3.webpack的插件机制指webpack在各个生命周期中暴露一些钩子函数，我们可以执行钩子函数，然后在里面加入一些任务
4.其中loader是管道思想，不停地加入管道，然后转化
5.webpack的工作原理
1.webpack cli 启动打包流程
2.载入webpack核心模块，创建Compiler对象
3.使用Compiler编译整个项目
4.从入口文件开始，解析模块依赖，形成依赖关系树
5.递归依赖树，将每个模块交给对应的Loader处理
6.合并Loader处理完的结果，将打包结果输出到dist目录

7.通过comoiler对象的hooks属性访问emit钩子，再通过tap方法注册钩子，
emit 会在webpack向输出目录输出文件时执行
8.插件常用的场景
1.实现自动打包前清除dist目录文件
2.自动生成所需要的Html文件
3.拷贝不需要打包的资源文件，到指定目录
4.压缩webpack打包完成后的输出文件
9.loader只在模块加载的环节工作，而插件几乎可以触及每一环节

10.webpack写一个插件的例子
class RemoveCommentPlugin{
apply(compiler){
compiler.hooks.emit.tap(‘RemoveCommentsPlugin’,compilation=>{
const noComment=compilation.replace("") //一顿猛操作后的结果
compilation.assets[name]={
source:()=>noComment，
size:()=>noComments.length
}
}
}
}
然后在webpack中引入该插件的路径