-
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 输出文件的体