webpack中强大的loader和plugin插件

常见的loader

1.file-loader：把⽂件输出到⼀个⽂件夹中，在代码中通过相对 URL 去引⽤输出的⽂件
2.url-loader：和 file-loader 类似，但是能在⽂件很⼩的情况下以 base64 的⽅式把⽂件内容注⼊到代码中去
3.source-map-loader：加载额外的 Source Map ⽂件，以⽅便断点调试
4.image-loader：加载并且压缩图⽚⽂件
5.babel-loader：把 ES6 转换成 ES5
6.style-loader：把 CSS 代码注⼊到 JavaScript 中，通过 DOM 操作去加载 CSS
7.eslint-loader：通过 ESLint 检查 JavaScript 代码

插件plugin生态

1.define-plugin：定义环境变量
2.html-webpack-plugin：简化html⽂件创建
3.uglifyjs-webpack-plugin：通过 UglifyES 压缩 ES6 代码
4.webpack-parallel-uglify-plugin: 多核压缩,提⾼压缩速度
5.webpack-bundle-analyzer: 可视化webpack输出⽂件的体积
6.mini-css-extract-plugin: CSS提取到单独的⽂件中,⽀持按需加载

Loader和Plugin的不同？

1.Loader直译为"加载器"。Webpack将⼀切⽂件视为模块，但是webpack原⽣是只能解析js⽂件，如果想将其他⽂件 也打包的话，就会⽤到
loader 。 所以Loader的作⽤是让webpack拥有了加载和解析⾮JavaScript⽂件的能⼒。
2.Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运⾏的⽣命 周期中会⼴播出许多事
件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

用法:
1.Loader在 module.rules 中配置，也就是说他作为模块的解析规则⽽存在。 类型为数组，每⼀项都是⼀ 个 Object ，⾥⾯描述了对于什么类型的⽂件（ test ），使⽤什么加载( loader )和使⽤的参数（ options ）

2.Plugin在 plugins 中单独配置。 类型为数组，每⼀项是⼀个 plugin 的实例，参数都通过构造函数传⼊。