# webpack常见面试问题

webpack是一个打包模块化javascript的工具,在webpack里一切文件皆模块

  1. 核心概念:Entry Output Loader Plugins Mode
  2. 常见的loader:自下而上
    • file-loader:把文件输出到一个文件夹中,在代码中通过相对 URL 去引用输出的文件
    • url-loader:和 file-loader 类似,但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去(包含file-loader的基本功能)
    • image-loader:加载并且压缩图片文件
    • babel-loader:把 ES6 转换成 ES5
    • css-loader:加载 CSS,支持模块化、压缩、文件导入等特性
    • style-loader:把 CSS 代码注入到 JavaScript 中,通过 DOM 操作去加载 CSS。
    • eslint-loader:通过 ESLint 检查 JavaScript 代码
    • sass-loader
    • postcss-loader css前缀兼容
  3. plugin:
    • html-webpack-plugin 生成一个index.html可以使用模板
    • clean-webpack-plugin 清除掉打包文件内容
    • mini-css-extract-plugin 从js中抽离css
    • optimize-css-assets-webpack-plugin 压缩css
    • workbox-webpack-plugin pwa缓存页面
    • add-asset-html-webpack-plugin 单独打包某些文件,如引入的jquery vue等
  4. 模块热更新 devServer hot设为true
最后更新: 7/13/2020, 2:32:45 PM