前世今生

webpack的目标是什么？模块化

那么早起的模块化是怎么样的？ 独立的js模块文件 --> 命名空间 --> IIFE

• 独立的js模块文件

<script src="module-a.js"></script>
<script src="module-b.js"></script>

全局污染，无依赖关系

• 命名空间

window.moduleA = {
  method1: function () {
    console.log('moduleA#method1')
  }
}

无法解决依赖问题

• IIFE

(function ($) {
  var name = 'module-a'

  function method1 () {
    console.log(name + '#method1')
    $('body').animate({ margin: '200px' })
  }
    
  window.moduleA = {
    method1: method1
  }
})(jQuery)

依赖通过传参方式，模块加载顺序未解决

是什么

webpack是一个用于现代JavaScript应用程序的静态模块打包工具

• 静态模块 开发阶段，可以被webpack直接引用的资源，可以被打进bundle.js的资源

webpack的能力

1. 编译代码能力 把es5以上格式的代码，编译成浏览器识别的es5代码
2. 模块整合能力 把一些模块整合成一个bundle.js文件，避免频繁请求，提高性能
3. 万物皆模块 所有类型的资源都可以通过代码控制

解决了什么问题？

1. 通过模块化的方式开发
2. 可以使用高级特性（ts，less）来开发
3. 监听文件编号，并反映到浏览器上
4. html/css/js都可以模块化
5. 代码压缩，合并及其他优化