>[success] # webpack 1. 官方对webpack 的解释 webpack is a **static module bundler** for **modern** JavaScript applications,**webpack是一个静态的模块化打包工具,为现代的JavaScript应用程序** * **打包bundler**:webpack可以将帮助我们进行打包,所以它是一个打包工具 * **静态的static**:这样表述的原因是我们最终可以将代码打包成最终的静态资源(部署到静态服务器); * **模块化module**:webpack默认支持各种模块化开发,ES Module、CommonJS、AMD等; * **现代的modern**:对于有环境兼容问题的代码,Webpack 可以在打包过程中通**Loader 机制对其实现编译转换**,然后再进行打包,对于不同类型的前端模块类型,Webpack 支持在 JavaScript 中以模块化的方式**载入任意类型的资源文件**,例如,我们可以通过Webpack 实现在 JavaScript 中加载 CSS 文件,被加载的 CSS 文件将会通过 style 标签的方式工作。 >[info] ## webpack 具备 * 根据官网图片最简单的理解就是将各种依赖文件最后分为四大块 ![](https://img.kancloud.cn/9f/74/9f74baa4c5021228fa942781e39843a9_1129x486.png) 1. **webpack的理念就是一切皆模块化**,把一堆的css文件和js文件放在一个总的入口文件,通过require引入,剩下的事情**webpack会处理**,包括所有模块的前后依赖关系,打包、压缩、合并成一个js文件,公共代码抽离成一个js文件、某些自己指定的js单独打包,模块可以是css/js/imsge/font等等 2. **WebPack可以看做是模块打包机**:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用 >[danger] ##### 基本能力处理依赖、模块化、打包 1. **依赖管理**:方便引用第三方模块,让模块更容易复用、避免全局注入导致的冲突、避免重复加载或者加载不必要的模块 2. **合并代码**:把各个分散的模块集中打包成大文件,减少HTTP的链接的请求次数,配合uglify.js可以减少、优化代码的体积 3. **各种插件**:babel把ES6+转化为ES5-,eslint可以检查编译时的各种错误 >[success] # webpack 术语 1. **module** 指在模块化编程中我们把应用程序分割成的独立功能的代码模块。 2. **chunk** 指模块间按照引用关系组合成的代码块,一个 chunk 中可以包含多个module。 3. **chunk group** 指通过配置入口点(entry point)区分的块组,一个 chunk group 中可包含一到多个 chunk。 4. **bundling** webpack 打包的过程。 5. **asset/bundle** 打包产物。 >[danger] ##### 可以参考 [极客时间视频课学习笔记](https://time.geekbang.org/course/detail/100028901-97213) [拉勾webpack链接](https://kaiwu.lagou.com/course/courseInfo.htm?courseId=88#/detail/pc?id=2262) [文章的推荐](https://github.com/webpack-china/awesome-webpack-cn/pulls) [以后要看的性能优化](https://juejin.im/post/5e53dbbc518825494905c45f) [特别好的博客](https://survivejs.com/webpack/developing/getting-started/) [webpack踩坑记录不错文章短小精炼](https://zhuanlan.zhihu.com/p/26262042) [http://webpack.html.cn/loaders/raw-loader.html](http://webpack.html.cn/loaders/raw-loader.html) >[danger] ##### 比较推荐的 [webpack 中那些最易混淆的 5 个知识点](https://juejin.im/post/6844904007362674701)