webpack

简介

webpack是一个模块打包工具，作用是处理依赖，模块化，打包压缩文件，管理插件

Entry：入口

• string-->./src/index.js"：单入口，打包生产一个chunk,输出一个bundle文件，此时chunk的名称默认是main
• array-->[./src/index.js,./src/add.js]：多入口，所有文件最终形成一个chunk,输出一个bundle文件
• object：多入口，有几个文件就有几个chunk，就会生成几个bundle,chunk的名称是key

Output：输出

Loader：翻译

Plugins：插件

Mode：模式指示webpack使用相应模式的配置

resolve：解析模块的规则

• alias：配置路径别名
• extension: 配置省略文件路径的后缀名 eg:引入tsx文件可以配置extension:['tsx']--> import './index' devServer：配置端口号，开启HMR功能等 optimization： 配置代码分割和压缩方案等

webpack性能优化

开发环境性能优化

• 优化打包构建速度
  • HMR ：HMR功能热模块替换，打包速度更快，比如样式文件更改不会更改js文件，js需要代码里配置module.hot,只能处理非入口文件
• 优化代码调试
  • source-map：sourcemap 开发环境调试代码，一种源代码到构建后代码的映射技术；例如：构建后的代码发生错误会映射到有错误的源代码方便调试，开发环境使用eval-source-map，生产环境：hidden-source-map

生产环境性能优化

• 优化打包构建速度
  • oneOf
  • babel缓存：catchDirectory:true 让第二次打包速度更快
  • 多进程打包
  • externals：不打包，通过cdn链接引入
  • dll：单独打包
• 优化代码运行的性能

  • 文件资源缓存：contenthash，哪个文件变了，哪个文件的hash改变，让缓存更好用

  • treeshaing:去除无用代码，ES6 Module，减少打包体积

  • 代码分割，按需加载：

    
    /*
        可以将node_modules中代码单独打包一个chunk最终输出
        自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk
    */
    
    optimization: {
        solitChunks: {
            chunks: "all"
        }
    }
    

  • lazy loading 当文件需要使用时再加载

  • prefetch 等其他资源加载完毕，浏览器空闲了，再偷偷加载资源

  • PWA 离线可以访问，渐进式网络开发应用程序

webpack5

• treeshaking能够正确处理多个模块和嵌套模块的关系
• outout支持输出ES6代码
• 新增catch配置缓存
• 加快首次打包
• 添加配置的默认值等