webpack

Posted 2021-09-14 yingmhd

webpack是一个JS应用打包器，它借助loaders（比如 sass-loader）和plugins(比如UglifyJsPlugin)将各种形态的的文件压缩、打包、优化，变成浏览器可以正常解析的文件。

模块化机制

它允许各种模块化规范的存在，你可以用export,也可以用exports，你可以用import，也可以用require，至于依赖关系，它自动处理好。

核心思想

1. 一切皆模块
   你可以require一个js文件，也可以require一个css文件
2. 按需加载
   传统模块打包工具最终将所有的模块编译成一个庞大的bundle.js，而webpack分割成了许多个bundle文件，而且异步加载代码实现按需加载

工作步骤

1. 从入口文件开始递归建立一个依赖关系图
2. 将所有的模块转化成模块函数，模块id是唯一记号
3. 根据依赖关系，按照配置文件将模块函数分组打包成若干个bundle
4. 通过script标签将打包后的bunld注入到html中，通过manifest文件来管理bundle文件的运行和加载

manifest 文件作用

用来引导模块的交互。manifest文件包含了加载和处理模块的逻辑。

.map 文件作用

webpack打包后会生成一个.map文件，这个主要为了调试方便，可以精确指出错误在哪里

常用优化

1. include & exclude实现精准打包
2. resolve.extension 设置文件默认后缀，默认是[\'.js\', \'.json\']
3. HappyPack将任务分解为多个子进程
4. watchOptions监听文件变化发生后一段时间再刷新浏览器，防止刷新了文件还没编译好
5. 模块热替换

6. 区分环境

   if(process.env.NODE_ENV == \'production\'){
       console.log(\'生产环境\');
   }else{
       console.log(\'开发环境\');
   }

7. Tree Shaking剔除javascript用不上的死代码
8. 使用common-chunk-and-vendor-chunk提取公共代码
9. splitChunks将公共的依赖提取到一个新生成的chunk，防止重复