Webpack5学习大纲笔记

• 五大核心概念
  • entry：入口
    • 指示 Webpack 从哪个文件开始打包
  • output：输出
    • 指示 Webpack 打包完的文件输出到哪里去，如何命名等
  • Loader：加载器
    • webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析
  • plugins：插件
    • 扩展Webpack的功能
  • mode：模式
    • 开发模式：development
    • 生产模式：production
• 常见Loader
  • Loader经常处理的资源
    • CSS、Less、Sass等CSS资源；
    • 图片/媒体资源；（webpack5内置）
    • Babel 编译器资源（babel-loader）
• 常见Plugins
  • Plugins经常处理的资源
    • Eslint语法检查（EslintWebpackPlugin）
    • HTML资源（HtmlWebpackPlugin）
    • 将CSS以单独的文件输出（MiniCssExtractPlugin）
    • 压缩CSS资源（CssMinimizerWebpackPlugin）

 

• Webpack优化配置
  • 优化角度：
    • 1.提升开发体验
      • SourceMap：获得精确位置的错误提示
    • 2.提升打包构建速度
      • HotModuleReplacement：局部热更新
      • OneOf ：当命中一个loader之后不再验证其他loader
      • Include / Exclude ：只编译处理包含的 或 编译处理 Exclude 以外的所有文件
      • Cache ：对 Eslint 检查 和 Babel 编译结果进行缓存
    • 3.减少代码体积
      • 抽离 Babel 对每一个被转换的文件加入的辅助代码，并单独引用
      • 本地图片的压缩
      • CSS的压缩
    • 4.优化代码运行性能
      • Code Split 代码分隔：
        • 分割文件：将打包生成的文件进行分割，生成多个 js 文件。
        • 按需加载：需要哪个文件就加载哪个文件。
      • Preload / Prefetch：
        • Preload：告诉浏览器立即加载资源。
        • Prefetch：告诉浏览器在空闲时才开始加载资源。
        • 他们都是只加载 但是不执行，且都有缓存
      • Network Cache：
        • 静态资源缓存优化，要用contenthash来解决当文件内容发生变化但输出文件名称没变从而导致的浏览器直接读取缓存而不是最新文件的情况
      • Core-js
        • 对JS做兼容处理，可以处理ES6以上的版本