webpack的应用和理解

1、webpack的作用？
a.模块打包。webpack里所有的文件都可以看作是一个个模块，可以将不同模块的文件打包整合在一起，保证项目结构的清晰和可读性。
b.编译兼容。为保证各类浏览器的兼容性，webpack的loader机制可以将一些less、scss、jsx等转换成浏览器可以支持的代码。
c.能力扩展。通过webpack的plugin机制，实现对代码的压缩打包和优化，要想使用一个插件只需要require()它，然后将它添加到plugins数组中。

2、webpack的打包原理？
a.读取webpack的配置参数(entry，output，module，plugin，derServer)，加载plugin；
b.启动webpack，创建编译器(compiler)对象并开始解析项目；
c.从入口文件entry开始解析，找到其导入的依赖模块(main.js、polyfill.ts、vendor.ts)，遍历分析形成依赖树。
d.对不同的module文件使用对应的loader进行编译，最终转化成javascript文件。
e.将编译后的module组合成chunk，最终webpack会把所有chunk转换成bundle文件输出给浏览器使用。

3、常见的loader和plugin？
raw-loader：加载文件原始内容(utf-8)
file-loader：处理图片文件
babel-loader：将es6转换成es5
ts-loader：将ts转换成js
sass-loader: 将scss、sass代码转换成css
css-loader： 加载css，支持压缩和文件导入。
style-loader：创建style标签，把 CSS 内容写入标签

HotModuleReplacementPlugin：局部刷新模块
html-webpack-plugin：最终打包后生成html文件
extract-text-webpack-plugin：将css从js中抽离出来生成单独的css文件，抽离的原因是页面加载js会比较慢，用户会看到css加载之前的内容，影响用户体验。
uglifyjs-webpack-plugin：对js文件进行压缩，减小js文件大小
DefinePlugin：设置全局变量，区分运行环境
webpack-merge：如果将配置文件拆分为3个文件，一个是webpack.common.js以及webpack.product.js和webpack.dev.js, 即不管是生产环境还是开发环境都会用到的部分，都可以使用webpack-merge来合并对象。

4、webpack的热更新原理？(简单回答，太深入了我也不懂)
HotModuleReplacement这个机制可以做到不刷新浏览器而将变更的模块替换旧模块。
webpack-dev-server传递新模块的hash值，HotModuleReplacement.runtime 接收到上一步传递过来的hash 值，然后向服务器发起ajax请求来获取更改内容。

5、loader和plugin的区别？
a、loader专注于处理文件(比如转换)，plugin还可以优化 压缩、定义环境变量等各种各样的功能，比如在打包出的js文件放到html的底部；
b、loader运行在文件打包之前，plugin在整个编译周期都起作用；

6、webpack中的hash、chunkhash、contenthash区别？
文件hash：一般是结合CDN缓存来使用，通过webpack构建之后，生产对应文件名自动带上对应的MD5值，如果文件内容改变的话，那么对应的文件哈希值也会改变，对应的HTML引用的URL地址也会改变，触发CDN服务器从源服务器拉取对应数据，进而更新本地缓存

hash
是整个项目的hash值，修改任何文件都会导致所有文件的hash发生改变
chunkhash
chunkhash和hash不一样，它根据不同的入口文件构建对应的chunk，生成对应的哈希值，我们把公共库采用chunkhash的方式生成hash值，只要不改动公共库的代码，哈希值就不会变
contenthash
当js文件中引入了css，只要js文件发生改变，关联的css文件hash也会发生改变，这个时候可以用extract-text-webpack-plugin分离css来生成contenthash，只要css文件不变，那么不会重复构建

7、webpack在项目启动时会打包吗？
Webpack 在启动开发服务器（通常通过 webpack-dev-server 或 webpack serve 命令）时，会执行一个称为“热模块替换”（Hot Module Replacement，简称 HMR）的过程。这个过程可以看作是一种特殊的“打包”，但它与生产环境下的打包有显著不同。

开发环境下的打包
在开发环境下，Webpack 会监控所有文件的更改，并在文件发生更改时自动重新编译受影响的模块。这个过程通常比生产环境下的完全打包要快得多，因为它只会重新编译和处理那些确实发生更改的部分，而不是整个项目。

当某个模块被修改并重新编译后，Webpack 的 HMR 功能会将更新后的模块推送到浏览器，而无需刷新整个页面。这样，开发者可以看到修改效果的同时，状态（如登录状态、表单数据等）得以保留，极大地提高了开发效率。

生产环境下的打包
相比之下，生产环境下的打包是一个完全不同的过程。在生产环境下，Webpack 会执行更全面的优化，包括但不限于：

代码分割（Code Splitting）：将代码分割成更小的块，以便于按需加载，减少初始加载时间。
压缩：去除空白字符和注释，缩短变量名，以减小程序的体积。
树摇（Tree Shaking）：移除未使用的代码，进一步减小程序体积。
资源优化：对图片、字体等静态资源进行压缩和格式转换，以提高加载速度。
持久化缓存：通过哈希或指纹（Hash/Fingerprint）策略，使得浏览器可以缓存文件，除非文件内容实际发生变化。
总结
Webpack 在开发环境下确实会进行“打包”，但这更像是一个即时的、增量的、局部的打包过程，旨在快速反馈和高效开发。而在生产环境下，Webpack 执行的打包则是全面的、深度优化的，旨在为最终用户提供高性能、低延迟的应用体验。

参考：https://juejin.cn/post/6844904094281236487#heading-0