webpack

元信息

• 目标：理解 webpack 为何是"集大成者"——一切资源皆模块，loader/plugin 扩展各类规范，配置式声明替代 gulp 命令式脚本；并知晓 ESM 原生化后其定位变化
• 关键概念：webpack、bundler、loader、plugin、代码分割、热加载
• 关联阶段：cp3
• 常见误区：以为 webpack 只打包 js（css/图片/json 皆可作模块处理）；以为配置越少越不如编码（声明式配置正是其相对 gulp 的进步）；以为现代开发仍离不开打包器（原生 ESM + import maps 已能支撑简单应用的免构建开发）

小结

• require.js 解决了客户端应用的模块化的概念和基本实现，但并非语法级的实现
• npm 解决了服务端的包管理、项目依赖配置，并支持require('cheerio')这类的语法，但仅适用于服务端应用
• gulp 解决了构建过程和可编程脚本，但使用命令式风格

有没有这样一种工具，它让开发者充分利用服务端的工具和node.js，支持模块化和import之类的语法，并且内置构建工具，但使用更为简单的声明语法(配置)，以及集成其它各类开发相关工具，从而方便高效地开发客户端（浏览器）应用。

webpack

一种前端资源模块化管理和打包工具。可以将众多松散的模块按照依赖关系和指定规则打包成符合生产环境部署的前端资源，核心是将前端开发中的所有资源（图片、js文件、css文件等）都可以看成模块，通过loader（加载器）和plugins（插件）以支持各类规范，如CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、SCSS等，并对这些资源进行自动化处理

• 综合require.js、npm、gulp等的功能及特性，支持import语法
• 可以按需加载所需各模块，并进行代码分割，等到实际需要的时候再异步加载，以改善单页应用的易用性
• 配置而无需编码
• 打包，将众多模块合并为少量静态资源文件（js/css 等），输出到指定目录
• 官方提供一组强大的loader和plugin，覆盖大部分常见任务，如es6 => es5 ,markdown => html, scss => css、文本压缩与混淆、图片压缩等，用户或社区也可自行开发对Webpack功能进行扩展
• 内置Web服务器，用于开发调试，并支持热加载(即代码改动后无需刷新即生效)

http://webpack.github.io/

安装

• 基础 https://www.webpackjs.com/guides/getting-started/
• 管理css资源 https://www.webpackjs.com/guides/asset-management/
• dev服务器 https://www.webpackjs.com/guides/development/

发展方向

随着javascript语言标准的发展和升级

• 内置支持模块化ESM和相应的import和export语句
  • https://zhuanlan.zhihu.com/p/400573436
• ESM 的 import 需要完整路径，裸模块名（如 'vue'）浏览器无法解析——新标准的 Import maps 支持建立模块名引用和模块文件之间的映射
  • https://www.jianshu.com/p/b23d823a183a
  • https://www.zhihu.com/question/453051246/answer/1880809468

对于简单的客户端应用，可以不再依赖webpack等打包工具，直接借助语言特性和浏览器环境完成模块化协作与应用打包

其它工具

• yeoman 脚手架工具 https://yeoman.io/
• grunt
• gulp
• browerify https://browserify.org/
  • https://juejin.cn/post/7288234800564551741
• rollup.js https://www.rollupjs.com/
• esbuild https://esbuild.docschina.org/
• systemJs和jspm https://github.com/systemjs/systemjs
• vite https://vitejs.cn/

教程

• http://www.runoob.com/w3cnote/webpack-tutorial.html
• https://www.webpackjs.com/guides/getting-started/

参考

• 各主流构建工具比较 https://www.cnblogs.com/souyidai/p/util_1.html
• Yeoman自动构建js项目 http://blog.fens.me/nodejs-yeoman-intro/

各种加载技术比较

• webpack 中的 import https://segmentfault.com/q/1010000010264149
• webpack中require和import的区别 https://www.cnblogs.com/raind/p/8601984.html
• webpack中require和import的区别 https://blog.csdn.net/qq_24122593/article/details/53103087

与gulp等比较

• gulp和webpack究竟有什么区别？ https://juejin.cn/post/6917069979913289736