webpack
小结
- require.js 解决了客户端应用的模块化的概念和基本实现,但并非语法级的实现
- bower 解决了客户端应用的包管理和项目依赖配置,但仍需要
<script>
- npm 解决了服务端的包管理、项目依赖配置,并支持
require('cheerio')
这类的语法,但仅适用于服务端应用 - gulp 解决了构建过程和可编程脚本,但使用命令式风格
有没有这样一种工具,它让开发者充分利用服务端的工具和node.js,支持模块化和import
之类的语法,并且内置构建工具,但使用更为简单的声明语法(配置),以及集成其它各类开发相关工具,从而方便高效地开发客户端(浏览器)应用。
webpack
一种前端资源模块化管理和打包工具。可以将众多松散的模块按照依赖关系和指定规则打包成符合生产环境部署的前端资源,核心是将前端开发中的所有资源(图片、js文件、css文件等)都可以看成模块,通过loader(加载器)和plugins(插件)以支持各类规范,如CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、SCSS等,并对这些资源进行自动化处理
- 综合require.js、bower、npm、gulp等功能的功能及特性,支持
import
语法 - 可以按需加载所需各模块,并进行代码分隔,等到实际需要的时候再异步加载,以改善单页应用的易用性
- 配置而无需编码
- 打包,将多个文件合并成一个index.html文件,输出到指定目录等
- 官方提供一组强大的loader和plugin,覆盖大部分常见任务,如es6 => es4 ,markdown => html, scss => css、文本压缩与混淆、图片压缩等,用户或社区也可自行开发对Webpack功能进行扩展
- 内置Web服务器,用于开发调试,并支持热加载(即代码改动后无需刷新即生效)
安装
- 基础 https://www.webpackjs.com/guides/getting-started/
- 管理css资源 https://www.webpackjs.com/guides/getting-started/
- dev服务器 https://www.webpackjs.com/guides/development/
发展方向
随着javascript语言标准的发展和升级
- 内置支持模块化ESM和相应的
import
和export
语句 - 上述esm未能解决实际模块文件加载,新标准的Import maps支持建立模块名引用和模块文件之间的映射
对于简单的客户端应用,可以不再依赖webpack等打包工具,直接借助语言特性和浏览器环境完成模块化协作与应用打包
其它工具
- bower https://bower.io/
- yeoman 脚手架工具 https://yeoman.io/
- grunt
- gulp
- browerify
- rollup.js https://www.rollupjs.com/
- esbuild https://esbuild.docschina.org/
- systemJs和jspm https://github.com/systemjs/systemjs
- vite https://www.vitejs.net/
教程
- 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