1.Loader和Plugin的区别是什么?
- 作用不同:oLoader直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。在Webpack运行的生命周期中会广播出许多事件，Plugin可以监听这些事件，在合适的时机通过Webpack提供的API改变输出结果。
- 用法不同:Loader在module.rules中配置，也就是说作为模块的解析规则而存在。类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件(test)，使用什么加载(loader)和使用的参数(options)oPlugin在plugins中单独配置。类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入。
2.常见的loader以及作用的总结
- raw-loader:加载文件原始内容(utf-8)
- file-loader:把文件输出到一个文件夹中，在代码中通过相对URL去引用输出的文件
- url-loader:和fle-loader类似，但是能在文件很小的情况下以base64的方式把文件内容注入到代码中
- source-map-loader:加载额外的Source Map文件，以方便断点调试
- svg-inline-loader:将压缩后的SVG内容注入代码中
- image-loader:加载并且压缩图片文件
- json-oader 加载JSON文件(默认包含)
- handlebars-loader:将Handlebars模版编译成函数并返回
- babel-loader:把ES6转化成ES5
- ts-loader:将TypeScript转换成JavaScript
- awesome-typescript-loader:将TypeScript转换成JavaScript，性能优于ts-loader
- css-loader:加载css，支持模块化、压缩、文件导入等特性
- style-loader:把css代码注入到js中，通过DOM操作去加载css
- eslint-loader:通过ESLint检查JS代码
- tslint-loader:通过TSLint检查TypeScript代码
- postcss-loader:扩展CSS语法，使用下一代CSS，可以配合autoprefixer插件自动补齐CSS3前缀
- vue-loader:加载Vue.js单文件组件
- cache-loader:可以在一些性能开销较大的Loader之前添加，目的是将结果缓存到磁盘里
3.webpack中source map是什么?生产环境怎么用?
source map是将编译、打包、压缩后的代码映射回源代码的过程。打包压缩后的代码不具备良好的可读性，想要调试源码就需要soucre map。
map文件只要不打开开发者工具，浏览器是不会加载的。线上环境一般有三种处理方案:
- hidden-sourco-map:借助第三方错误监控平台Sentry使用
- nosources-source-map:只会显示具体行数以及查看源代码的错误栈。安全性比source map高
- source:通过nginx设置将.map文件只对白名单开放(公司内网)
注意的是:避免在生产中使用inline-和eval-，因为它们会增加bundle体积大小，并降低整体性能。