不理解webpack的Loader，Plugin嘛，开发一个试试

*.模块化带来的问题

1.ES Modules存在环境兼容问题

2.模块文件过多，网络请求频繁

3.所有的前端资源都需要模块化，不仅仅是JavaScript模块(html,css模块)

打包到一起，解决浏览器频繁对模块文件发出请求的问题

开发阶段通过模块化去编写，生产阶段通过打包工具打包

前端模块打包工具满足：

1.新特性代码编译

2.模块化JavaScript打包

3.支持不同类型的资源文件

webpack作为一个模块打包工具

1.本身可以解决模块化JavaScript打包的问题，将零散的模块代码打包到同一个JS文件当中；

2.对代码中那些有环境兼容问题的代码，就可以在打包的过程中，通过模块加载器(Loader)，对其进行编译转换；

3.webpack具有代码拆分的能力，将应用当中所有的代码都按照我们的需要打包，不用担心打包到一起文件比较大的问题；将应用加载当中初次运行所必须的模块打包到一起，其他模块单独存放，到实际需要时异步加载该模块，实现增量加载或渐进式加载，避免文件太碎或者文件太大问题

4.webpack支持以模块化的方式载入任意类型的资源文件

注：打包工具解决的是前端整体的模块化，并不单指JavaScript模块化

yarn init --yes  //初始化package.json  webpack为npm的工具模块
yarn add webpack webpack-cli --dev
yarn webpack //或者写入package.json的scripts中 使用yarn build

1.webpack会根据众多文件中项目的配置找到入口文件，一般情况下这个文件为javascript文件；

2.通过import，require解析推断出这个模块所需要的资源模块，分别去解析每个资源模块对应的依赖，最后形成了文件的依赖关系树，通过递归依赖树找到每个节点所对应的资源文件；

3.然后根据配置文件中的routes属性，去找到这个模块对应的加载器，交给对应的加载器去加载这个模块；

4.最后将加载结果放入到bundle.js中，从而实现整个项目的打包

5.其中，Loader机制为webpack的核心

Loader的工作原理

实现一个markdown-loader加载器，可直接在代码中导入markdown文件

markdown文件转换为html后展现在页面中的，这个loader结果为转换过后的HTML字符串

相比于Loader，Plugin拥有更宽的能力范围

Plugin通过钩子机制实现

webpack要求插件必须是一个函数或者是一个包含apply方法的对象

一般将插件定义为一个类型，在类型中定义一个apply方法，使用时通过类型构建一个实例去使用

原理：插件是通过在webpack生命周期的钩子中挂载函数实现扩展

开发一个移除注释的webpack插件的过程

原始效果：

实现方式：

完毕