draculapile/webpack-bp

webpack(5.x) better practice

JavaScriptMIT

webpack-bp

webpack(5.x) be...tter practice and some notes

重要知识点请查看具体目录下的配置文件，build 依赖的包版本：

webpack@5.72.0 webpack-cli@4.9.2

Tips：

v4.x 版本 webpack 打包结果请自行尝试

可以将 webpack 和 webpack-cli 等依赖安装到根目录（如本项目），每个文件夹下建立 package.json，单独执行 build 命令，共享依赖（默认会向上层目录寻找） a. 或者使用软链接命令 ls

ls -s dir1/node_modules dir2/node_modules

大纲

webpack-bp
- 基础
  - 基本概念
    - module、chunk、asset
  - 基础配置
    - module
    - target
    - entry
    - output
    - mode
    - resolve
    - loaders
    - plugins
    - 文件指纹
    - 环境变量
    - devServer
    - polyfill
- 进阶和优化
  - CSS
    - css-loader 的 importLoaders 参数
  - 资源内联
    - 场景一：公共 HTML 嵌入入口文件
    - 场景二：CSS 内联
  - 自动清理构建目录
  - 代码分割 Code Splitting
    - 动态引入 Dynamic Imports
    - splitChunks
      - reuseExistingChunk
      - maxAsyncRequests 和 maxInitialRequests
      - 样式文件分包
      - 最佳实践
  - Scope Hoisting
    - 注意事项
  - Tree Shaking
    - 标记 unused 导出
      - 结合 optimization.minimize 配置项
      - 一些标记失效场景
        
        场景一：导出的对象内部属性
        
        场景二：保留对模块内变量的引用
        
        场景三：Class 内未使用的方法
      - 标记失效 !== 无法 Tree Shaking
    - sideEffects：整体移除文件和模块
      - optimization.sideEffects
        
        reexport 优化
        
        with CSS
      - /*#__PURE__*/ 注释
    - CSS 的 minify
    - With Babel
    - CommonJS 的 Tree Shaking
    - 最佳实践
  - 持久化缓存 Persistent Caching
  - 模块联邦
- Babel 配置详解
- Vue 配置文件解析
- React 配置文件解析
- Source Map
- 原理与源码分析

continuous building...