webpack常用的工具栈

转换器	说明
babel-core	ES6代码转换器
babel-preset-env	会加载从es2015开始的所有preset 相当于 es2015 ，es2016 ，es2017 及最新版本。 https://segmentfault.com/a/1190000016311818
babel-preset-stage-0	preset-stage-1 preset-stage-2 preset-stage-3 https://github.com/babel/babel/blob/master/packages/babel-preset-stage-0/README.md
babel-polyfill	来模拟实现浏览器本身不支持的对象或方法 https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md#toc-babel-polyfill
babel-plugin-import	自动转换为按需引入的方式 https://segmentfault.com/a/1190000019322275
babel-plugin-module-resolver	设置一个自定义别名目录 https://github.com/tleunen/babel-plugin-module-resolver
babel-plugin-syntax-dynamic-import	懒加载

webpack插件	说明
webpack	用来构建打包程序
webpack-dev-server	开发环境下，设置代理服务器
webpack-merge	配置文件合并
webpack-cli	webpack-cli 命令
babel-loader	ES6代码转换器，用来处理ES6语法，将其编译为浏览器可以执行的js语法。 https://segmentfault.com/a/1190000013926616
cache-loader	在一些性能开销较大的 loader 之前添加此 loader，以将结果缓存到磁盘里。
file-loader	默认情况下，生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。
url-loader	url-loader功能类似于file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。 url-loader可以将图片转为base64字符串。
css-loader	css-loader 解释(interpret) @import和url()
less-loader	预处理器less的webpack 插件
postcss-loader	一种对css编译的工具，类似babel对js的处理
style-loader	通过注入<style>标签将CSS添加到DOM
vue-loader
exports-loader	语句从文件内导出变量
script-loader	全局上下文环境中执行模块 JS 文件
friendly-errors-webpack-plugin	更好在终端看到webapck运行的警告和错误
html-webpack-plugin	html 文件编译
mini-css-extract-plugin	webpack4单独打包css文件
optimize-css-assets-webpack-plugin	用于优化或者压缩CSS资源