Webpack实战-入门、进阶与联调小结

1、 Webpack简介

• 何为Webpack

• 使用 Webpack 的意义

• 如何开始一个 Webpack 工程
  1、Webpack 是一个开源的 JavaScript 模块打包工具，其最核心的功能是解决模块依赖，把各个模块按照特定的规则和顺序组织在一起，最终合并成1个/多个 JS 文件。
  2、随着技术发展，JS 承担的功能多了代码也增多。产生一些不好维护的地方：

  • 需要手动维护 JS 的加载顺序。多个 script 之间通常会有隐式依赖关系，页面多的时候容易出问题

  • 每一个 script 标签都意味着需要向服务器请求一次静态资源，过多请求会拖慢网页渲染速度

  • 每个 script 标签中，顶层作用域即全局作用域，如果没有任何处理而直接在代码中进行变量或函数声明，就会全局污染

    而模块化解决了上述问题。

  • 通过导入和导出语句可以清晰看到模块间的依赖关系

  • 模块可以借助工具来进行打包，页面中只需要加载合并后的资源文件，减少网络开销

  • 多个模块之间的作用域是隔离的，不会有命名冲突

3、安装和打包
它唯一的依赖就是 Nodejs，推荐使用 Nodejs 的LTS （Long TermSupport，长期维护）

• 全局安装，与他人进行项目协作的时候，由于每个人系统中的 Webpack 版本不同，可能导致输出结果不一致ÿ