前端工程化(二)：Webpack、Babel、TreeShaking

webpack热更新

如果是node监听文件的修改，全部重新加载，那么太粗暴，实现方式不够优雅

使用 webpack-hot-middleware 和 webpack-hot-client插件

//index.js
if(module.hot){
  module.hot.accept('./hello.js',function(){
     div.innerHTML = hello()
  })
}

weback插件开发

• compiler：包含options，loaders，plugins这些信息，这个对象在Webpack启动的时候被实例化，它是全局唯一的，可以简单的把它理解为Webpack实例
• compilation：编译过程的生命周期，这个对象可以访问所有的模块和它们的依赖，包含了当前的模块资源、编译生成资源、变化的文件等。当Webpack以开发模式运行时，每当检测到一个文件变化，一次新的Compilation将被创建。Compilation对象也提供了很多回调供插件做扩展。通过Compilation也能读取到Compiler对象。

compiler文档

• beforeRun：在开始执行一次构建之前调用，compiler.run方法开始执行后立刻进行调用
• run：在开始读取records之前调用
• watchRun：一个新的compilation触发之后，但在compilation实际开始之前执行
• beforeCompile：在创建compilation parameter之后执行
• compile：beforeCompile之后立即调用，但在一个新的compilation创建之前
• thisCompilation：初始化compilation时调用，在触发compilation事件之前调用
• afterCompile：compilation结束和封印之后执行
• shouldEmit：在输出asset之前调用。返回一个布尔值，告知是否输出
• Emit：输出asset到output目录之前执行
• afterEmit：输出asset到output目录之后执行

compilation文档

• buildModule：在模块构建开始之前触发，可以用来修改模块
• rebuildModule：在重新构建一个模块之前触发
• failedModule：模块构建失败时执行
• succeedModule：模块构建成功时执行
• finishModules：所有模块都完成构建并且没有错误时执行

插件的入口一般是apply

Webpack Module Federation
在客户端或服务器上动态运行另一个bundle的代码
动态：按需，一个包拆开来加载其中一部分
运行时：在浏览器运行，非node编译
另一个bundle的代码：应用级export成员共享
Remote：被Host消费的Webpack构建
Host：消费其他Remote的Webpack构建
优势：1.实现组件级别的复用 2.依赖自动管理 3.共享模块非常灵活
不足：1.共享模块更新，依赖共享模块应用同步更新机制 2.应用之间无法隔离（全局变量和style样式）3.目前导出Remote模块仅仅支持全局变量，不够优雅

Babel

Babel是js编译器，把最新的js编译成当下可以执行的版本

Tree-Shaking

Dead Code

• 代码不会被执行，不可到达
• 代码执行的结果不会被用到
• 代码只会影响死变量（只写不读）

ES6 module的特点

• 只能作为模块顶层的语句出现
• import 的模块名只能是字符串常量
• import binding是 immutable的

可以进行可开的静态分析，然后进行消除
ES6的模块引入是静态分析的，故而可以在编译时正确判断到底加载了什么代码
分析程序流，判断哪些变量未被使用引用，进而删除此代码

Side-effect 副作用

• 修改一个变量
• 修改一个对象的字段值
• 抛出异常
• 在控制台显示信息、从控制台接收输入
• 在屏幕上显示（GUI）
• 读写文件、网络、数据库

通过 package.json 的 “sideEffects” 属性，来提示 webpack compiler 哪些代码是“纯粹部分”

{
  "name": "your-project",
  "sideEffects": false
}