webpack是什么；webpack vs rollup；webpack相关资料收集外链；

疑问

• webpack与rollup的区别

  • 答：打包模式上存在一些差异，根据具体需求/项目现状/团队工具链，可以选择不同的打包工具。

    摘要&心得

• Webpack 实质就是一个“前端模块打包器”

• webpack处理结果：

  // filename: bundle.js
  const modules = {
  'circle.js': function(exports, require) {
    const PI = 3.141;
    exports.default = function area(radius) {
      return PI * radius * radius;
    }
  },
  'square.js': function(exports, require) {
    exports.default = function area(side) {
      return side * side;
    }
  },
  'app.js': function(exports, require) {
    const squareArea = require('square.js').default;
    const circleArea = require('circle.js').default;
    console.log('Area of square: ', squareArea(5))
    console.log('Area of circle', circleArea(5))
  }
  }
  webpackBundle({
  modules,
  entry: 'app.js'
  });

• 上述代码：

  • 维护了modules变量，存储了不同模块信息
    • key 为模块路径名
    • value 为一个被 wrapped 过的模块函数
      • 该函数形如“function(exports, require) {}”
      • 为每个模块提供exports和require能力，同时保证了每个模块都处于一个隔离的函数作用域范围。
  • 有了modules变量还不够，还要依赖webpackBundle方法，将所有内容整合在一起
• Rollup 的原理思想与 Webpack 不同
  • Rollup 不会维护一个 module map
  • rollup将所有模块拍平（flatten）放到 bundle 中，也就不存在包裹函数
  • 为了保证命名冲突不出现，Rollup 将函数和变量名进行了改写
• 然后文章手动实现了一个打包器？也许可以加深对webpack原理的理解，但是感觉没啥必要。

  相关阅读&收集：

  webpack