Webpack的loader和plugin

loader的作用：

• webpack中的loader是一个函数，主要为了实现源码的转换，所以loader函数会以源码作为参数，比如将ES6转换为ES5，将less转换为css，将css转换为js,以便能嵌入到html文件

常见的loader:

• file-loader:把文件输出到一个文件夹中，在代码中通过相对URL去引用输出文件

• url-loader：和file-loader类似，但是能在文件很小的情况下以base64的方式把文件内容注入到代码中去

• source-map-loader：加载额外的Source Map文件，以便断点调试

• image-loader:加载并压缩图片文件

• babel-loader：把ES6转换为ES5

• css-loader:加载CSS，支持模块化、压缩、文件导入等特性

• style-loader：把CSS代码注入到js中，通过DOM操作去加载CSS

• eslint-loader:通过ESlint检查js代码

plugin的作用：

• plugin是一个类，类中有一个apply()方法，主要用于Plugin的安装，可以在其中监听一些来自编译器发出的事件，在合适的时机做出一些事情。

常见的Plugin：

• html-webpack-plugin:可以复制一个有结构的html文件，并自动引入打包输出的所有资源（JS/CSS）

• clean-webpack-plugin:重新打包自动清空dist目录

• mini-css-extract-plugin:提取js中的css成单独文件

• optimize-css-assets-webpack-plugin:压缩css

• uglifyjs-webpack-plugin:压缩js

• commons-chunk-plugin:提取公共代码

• define-plugin：定义环境变量