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:定义环境变量