这是我参与「第五届青训营 」笔记创作活动的第9天。
作用
loader和插件是webpack工程化中，两个比较核心的概念。学会这两个，是掌握webpack的关键。
loader的使用
什么是loader
loader是webpack中一个非常核心的概念，现在我们来思考一下webpack用来做什么？
我们主要使用webpack来处理js代码，并且webpack会自动处理js之前相关的依赖 但，在开发中不仅由基本的js代码处理，也需要加载css、图片、也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等。 对于webpack本身的能力来说，对于这些转化是不支持的 此时给webpack扩展对应的loader就可以了
loader使用过程（举例子）
1、css文件处理
- 在src目录中，创建一个css文件，其中创建一个normal.css文件
- 重新组织文件的目录结构，将零散的js文件放在一个js文件夹中
- normal.css中的代码非常简单，就是将body设置为red
plugin的使用
认识plugin
plugin是什么？ 1、plugin是插件的意思，通常是用于对某个现有的架构进行扩展 2、webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等
loader和plugin区别
1、loader主要用于转化某些类型的模块，它是一个转化器 plugin是插件，它是对webpack本身的扩展，是一个扩展器
plugin的使用过程
1、步骤一：通过npm安装需要使用plugins（某些webpack已经内置的插件不需要安装） 2、步骤二：在webpack.config.js中的plugins中配置插件 2、webpack-添加版权信息Plugin的使用
总结
掌握loader和插件这两个核心技术，是webpack的关键，我们学习过程中，要自己学会自己开发loader和插件，这样有助于学习webpack。希望大家能够扩展自己的知识面。
