loader 和 plugin 区别和自己手动实现

 

webpack的打包原理

识别入口文件

通过逐层识别模块依赖(Commonjs、amd或者es6的import，webpack都会对其进行分析，来获取代码的依赖)

webpack做的就是分析代码，转换代码，编译代码，输出代码

最终形成打包后的代码

 

1. loader

   loader从字面的意思是 加载 。
   loader是一个转换器，将A文件进行编译成B文件，比如：将A.less转换为A.css，单纯的文件转换过程。
   由于webpack 本身只支持js和json这两种格式的文件，只能打包commonjs规范的文件，对于其他文件需要通过loader将其转换为commonJS规范的文件后，webpack才能解析到。对css、图片等格式的文件无法打包，可以使用loader引入第三方的模块进行打包。

         loader虽然是扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域，完成压缩，打包，语言翻译。

         loader是运行在NodeJS中，仅仅只是为了打包。
    

   如：css-loader和style-loader模块是为了打包css的

         babel-loader和babel-core模块时为了把ES6的代码转成ES5

         url-loader和file-loader是把图片进行打包的。
   postcss-loader、sass-loader

2. plugin
   plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务

   plugin也是为了扩展webpack的功能，但是 plugin 是作用于webpack本身上的。而且plugin不仅只局限在打包、资源加载上，它的功能要更加丰富。从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。
   
   webpack提供了很多开箱即用的插件：CommonChunkPlugin主要用于提取第三方库和公共模块，避免首屏加载的bundle文件，或者按需加载的bundle文件体积过大，导致加载时间过长，是一把优化的利器。
   
   而在多页面应用中，更是能够为每个页面间的应用程序共享代码创建bundle。
   
   插件可以携带参数，所以在plugins属性传入new实例。
    

   plugin也是为了扩展webpack的功能，但是 plugin 是作用于webpack本身上的。而且plugin不仅只局限在打包，资源的加载上，它的功能要更加丰富。从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。webpack提供了很多开箱即用的插件：CommonChunkPlugin主要用于提取第三方库和公共模块，避免首屏加载的bundle文件，或者按需加载的bundle文件体积过大，导致加载时间过长，是一把优化的利器。而在多页面应用中，更是能够为每个页面间的应用程序共享代码创建bundle。

         插件可以携带参数，所以在plugins属性传入new实例。

   如：

   1）、针对html文件打包和拷贝（还有很多设置）的插件：html-webpack-plugin。
          不但完成了html文件的拷贝，打包，还给html中自动增加了引入打包后的js文件的代码（<script src=""></script>），还能指明把js文件引入到html文件的底部等等。

   具体使用，可以查看：webpack打包（主要是处理html文件），并启动服务器

   代码如下：

   plugins:[   
           //对html模板进行处理，生成对应的html,引入需要的资源模块
           new HtmlWebpackPlugin({
               template:'./index.html',//模板文件，即需要打包和拷贝到build目录下的html文件
               filename:'index.html',//目标html文件
               chunks:['useperson'],//对应加载的资源,即html文件需要引入的js模块
               inject:true//资源加入到底部，把模块引入到html文件的底部
           })
     ]

3. 从运行时机的角度区分
    1 ). loader运行在打包文件之前（loader为在模块加载时的预处理文件）
    2).  plugins在整个编译周期都起作用。

4. 实现