Webpack 基础知识(二)

蛤蛤蛤，一还没有写，一的话是一些总结的小东西，从二开始是比较重要的，比较需要记住的东西，同时也相当于随堂笔记的样子吧

Webpack 热更新原理

webpack-dev-server

1. WDS 不刷新浏览器
2. WDS 不输出文件，而是放在内存中
3. 使用 HotModuleReplacementPlugin 插件来使浏览器刷新
4. --open 参数作用，自动开启浏览器
5. 开发环境使用

// 在配置中添加
mode: 'development', // 因为一般是在开发环境中使用
plugins: [
    new webpack.HotModuleReplacementPlugin()
],
devServer: {
    contentBase: './dist', // WDS 服务的基础目录
    hot: true // 开启热更新
}

webpack-dev-middleware

1. 更灵活
2. 将输出的文件传输给服务器，可以对 webpack 配置的更多

原理

1. Webpack Compile：将 JS 编译成 bundle.js（打包好输出的文件）
2. HMR Server：将热更新的文件输出给 HMR Runtime
3. Bundle Server：提供文件在浏览器的访问。即使用 localhost + port 的方式打开
4. HMR Runtime：会被注入到浏览器的 bundle.js 里面，浏览器的 bundle.js 就可以和服务器建立连接，通常是一个 ws 连接，当收到文件更新的数据回包之后。就可以自动更新文件的变化
5. bundle.js：构建输出的文件

• 启动阶段：1--2--A--B
• 文件更新：1--2--3--4

文件指纹

通常用于版本的管理，在版本发布的时候，通常我们只需要修改更改的文件的文件指纹，没有更改的文件是不用修改文件指纹的，而且文件指纹没有修改的话浏览器也可以使用本地的缓存，可以加速页面的访问

生成

1. Hash： 和整个项目的构建相关，只要项目文件有修改，整个项目构建的 hash 值就会更改
2. Chunkhash：和 webpack 打包的 chunk 有关，不同的 entry 会生成不同的 chunkhash 值
3. Contenthash：根据问价那内容来定义 hash ，文件内容不变，则 contenthash 不变

思考：为什么 js 没有 contenthash ？（主要是要理解 contenthash 的作用）