再来一打webpack面试题，Web前端上机面试题

• svg-inline-loader：将压缩后的 SVG 内容注入代码中

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

• json-loader 加载 JSON 文件（默认包含）

• handlebars-loader: 将 Handlebars 模版编译成函数并返回

• babel-loader：把 ES6 转换成 ES5

• ts-loader: 将 TypeScript 转换成 JavaScript

• awesome-typescript-loader：将 TypeScript 转换成 JavaScript，性能优于 ts-loader

• sass-loader：将 CSS 代码注入 JavaScript 中，通过 DOM 操作去加载 CSS

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

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

• postcss-loader：扩展 CSS 语法，使用下一代 CSS，可以配合 autoprefixer 插件自动补齐 CSS3 前缀

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

• tslint-loader：通过 TSLint检查 TypeScript 代码

• mocha-loader：加载 Mocha 测试用例的代码

• coverjs-loader：计算测试的覆盖率

• vue-loader：加载 Vue.js 单文件组件

• i18n-loader: 国际化

• cache-loader: 可以在一些性能开销较大的 Loader 之前添加，目的是将结果缓存到磁盘里

更多 Loader 请参考官网

https://webpack.docschina.org/loaders

(面试官：挺好，知道的还挺多)

1.有哪些常见的Plugin？你用过哪些Plugin？

---

(这大兄弟好像听上瘾了，继续开启常规操作)

• define-plugin：定义环境变量 (Webpack4 之后指定 mode 会自动配置)

• ignore-plugin：忽略部分文件

• html-webpack-plugin：简化 HTML 文件创建 (依赖于 html-loader)

• web-webpack-plugin：可方便地为单页应用输出 HTML，比 html-webpack-plugin 好用

• uglifyjs-webpack-plugin：不支持 ES6 压缩 (Webpack4 以前)

• terser-webpack-plugin: 支持压缩 ES6 (Webpack4)

• webpack-parallel-uglify-plugin: 多进程执行代码压缩，提升构建速度

• mini-css-extract-plugin: 分离样式文件，CSS 提取为独立文件，支持按需加载 (替代extract-text-webpack-plugin)

• serviceworker-webpack-plugin：为网页应用增加离线缓存功能

• clean-webpack-plugin: 目录清理

• ModuleConcatenationPlugin: 开启 Scope Hoisting

• speed-measure-webpack-plugin: 可以看到每个 Loader 和 Plugin 执行耗时 (整个打包耗时、每个 Plugin 和 Loader 耗时)

• webpack-bundle-analyzer: 可视化 Webpack 输出文件的体