前端学习博客

本文并非原创，而是笔者最近在研究webpack方面的知识，看了一些比较好的文章，对此进行总结。

Hash：和整个项目的构建相关，只要项目文件有修改，整个项目构建的 hash 值就会更改Chunkhash：和 Webpack 打包的 chunk 有关，不同的 entry 会生出不同的 chunkhash：根据文件内容来定义 hash，文件内容不变，则 contenthash 不变。

找出入口文件后，从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理，再根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk。在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。可以读取到当前的模块资源，编译生成资源，变化的文件，以及依赖跟踪等状态信息。

顺利生成代码，此时生成的代码并没有被编译，因为 Babel 将原来集成一体的各种编译功能分离出去，独立成插件，要编译文件需要安装对应的插件或者预设，我们经常看见的什么 @babel/preset-stage-0、@babel/preset-stage-1，@babel/preset-env 等就是干这些活的。虽然可以采用默认配置，但如果不需要照顾所有的浏览器，还是建议你配置目标浏览器和环境，这样可以保证编译后的代码体积足够小，因为在有的版本浏览器中，新语法本身就能执行，不需要编译。

webpack和Lint等很多的工具和库的核心都是通过抽象语法树这个概念来实现对代码的检查、分析等操作的代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等如 JSLint、JSHint 对代码错误或风格的检查，发现一些潜在的错误IDE 的错误提示、格式化、高亮、自动补全等等代码混淆压缩UglifyJS2 等优化变更代码，改变代码结构使达到想要的结构代码打包工具 webpack、rollup 等等。

使用 loader 的方式配置方式：在 文件中指定 loader。（pre、normal、post loader）内联方式：在每个 语句中显式指定 loader。（inline loader）inline loader用法：含义： 可以通

无论是什么开发，要求开发环境最不可少的一点功能就是 ——debug功能。之前我们通过webpack, 将我们的源码打包成了 bundle.js。 试想：实际上客户端(浏览器)读取的是打包后的 bundle.js ,那么当浏览器执行代码报错的时候，报错的信息自然也是bund............

代码分离特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。常用的代码分离方法有三种：在 src 目录下创建 another-module..........

开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。所以我们需要打包工具帮我们做完这些事。除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。 输出的文件叫做 webpack 本身功能是有限的:2.下载依赖打开终端，来到项目根目录。运行以下指令：此时会生成一个基础的 文件。需要注意的是 中 字段不能叫做 , 否则下一步会报错