>[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 具备 * 根据官网图片最简单的理解就是将各种依赖文件最后分为四大块  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)