webpack中loader和plugin的作用是什么？有哪些常见的loader

常见的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 代码注⼊到 JavaScript 中，通过 DOM 操作去加载 CSS。

• eslint-loader：通过 ESLint 检查 JavaScript 代码

常见的plugin

• define-plugin：定义环境变量

• html-webpack-plugin：简化html⽂件创建

• uglifyjs-webpack-plugin：通过 UglifyES 压缩 ES6 代码

• webpack-parallel-uglify-plugin: 多核压缩，提⾼压缩速度

• webpack-bundle-analyzer: 可视化webpack输出⽂件的体积

• mini-css-extract-plugin: CSS提取到单独的⽂件中，⽀持按需加载

区别：

不同的作⽤:

• Loader直译为"加载器"。Webpack将⼀切⽂件视为模块，但是webpack原⽣是只能解析js⽂件，如果想将其他⽂件也打包的话，就会⽤到 loader 。 所以Loader的作⽤是让webpack拥有了加载和解析⾮JavaScript⽂件的能⼒。

• Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运⾏的⽣命周期中会⼴播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

不同的⽤法:

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

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

webpack默认情况下只认识.js结尾的文件，要打包其它类型的文件，则我们需要在webpack.config.js文件中进行配置，只有通过正确的配置后，当webpack进行打包时才能对其它类型的文件进行正确的打包，那我们最常打包的文件类型有哪些呢？

1.file-loader

file-loader可以用于图片资源的打包配置，当我们只配置loader时，那打包好的图片资源默认是存放在输出文件所在的同级目录下，并且名称格式是：hash值.文件后缀，这样当我们打包多张图片资源时，就无法分清楚哪个打包好的图片资源是由哪张图片打包而来，只能打开该资源才能知道,而且打包好的图片资源是分散的。为了便于区分和统一管理，我们可以在配置项loader后面，再配置一个options配置对象，在这个options配置对象中，我们可以配置图片打包好之后的名称，存放的位置等。

2.url-loader

url-loader的作用跟file-loader差不多，但它比file-loader更强大，它不止能实现file-loader的打包功能，它还比file-loader多一个limit配置项，这个limit配置就是配置图片资源的大小的，即当我们的图片资源大于这个限定值时，则打包后的图片资源放入单独的文件夹进行存放，如果打包后的图片资源小于这个限定值，则直接将该图片资源放入出口js(base64)文件中。

3.sass-loader

当我们打包sass语法编写的css文件时，sass-loader的作用就是将该css文件翻译成纯css语法文件，以便后续打包处理，需要注意的是，在我们需要使用sass-loader时，在安装sass-loader时还需要安装node-sass。

4.css-loader

我们的css打包文件中可能会引入其它的css文件，而css-loader的作用就相当于把这些相互依赖的css文件合并成一个css文件。

5.style-loader

我们需要打包的css文件在经过sass-loader的翻译，css-loader的合并之后，style-loader的作用就是把合并后的css文件挂载到页面的head中来渲染出页面的样式。

6.postcss-loader

postcss-loader是一个辅助性loader，它是针对css3中新增样式属性而存在的，它可以将css样式文件中的css3样式属性在挂载到页面上时，自动在新样式属性前添加上像-webkit-，-moz-这样的厂商前缀，但是它的使用还需要一个autoprefixer插件配合使用，我们配置postcss-loader的方式跟配置其它loader的方式一样，而引入autoprefixer插件则需要在postcss.config.js文件中引入

1. plugin的作用是什么？有哪些常见的plugin？

plugin是一个插件，它是对webpack本身的扩展，是一个扩展器，通过插件我们可以扩展 webpack，加入自定义的构建行为，使 webpack 可以执行更广泛的任务，拥有更强的构建能力。

1-HtmlWebpackPlugin

在打包结束后，⾃动生成⼀个 html ⽂文件，并把打包生成的js 模块引⼊到该 html 中

2-clean-webpack-plugin

删除（清理）构建目录

3-mini-css-extract-plugin

提取 CSS 到一个单独的文件中

4-DefinePlugin

允许在编译时创建配置的全局对象，是一个webpack内置的插件，不需要安装