webpack4学习笔记基础配置（二）

1.哈希值：

上一篇写了基础配置里几个简单的介绍几个webpack基础属性，和一些基础的知识点，
但是上一篇的entry入口属性只是简单的介绍没有深入，今天着重看了entry的一些用法
准备记录下来，同时一些相关的零散知识也会记录下来。

哈希值的区分
entry入口的写法和对应的功能
多入口的场景和应用（下一篇）
CommonsChunkPlugin 插件对多入口文件的处理（下一篇）
代码分离（下一篇）

1.哈希值：

 output:{
       entry:{
            app:"./src/app.ts",
        },
    filename:"[name].[hash].js",
    path:path.resolve(__dirname,"dist"),
},

通过给webpack打包的output选项设置filename时候设置哈希文件名，具体示例子在上图第
5行。顺带提一下[name]对应的是入口entry定义的入口名字，类似上方配置打包出来的文件。

希码具体有什么作用，具体分类几类，怎么使用。

哈希值其实是为了处理缓存问题，我们的文件在被客户端浏览器访问时候，浏览器是存
在缓存机制的，当我们服务器资源文件发生改变时通过文件名称的改变，浏览器会重新
请求最新的资源，而不是从缓存中读取。hash一般也结合CDN缓存来使用，通过webpack
构建之后，生成对应文件名自动带上对应的MD5值。如果文件内容改变的话，那么对应文
件哈希值也会改变，对应的HTML引用的URL地址也会改变，触发CDN服务器从源服务器
上拉取对应数据，进而更新本地缓存。

在实际使用时候hash值还是分几类的：
hash：hash是跟整个项目的构建相关，只要项目里有文件更改，整个项目构建的hash
值都会更改，并且全部文件都共用相同的hash值。
更改第一个例子里的代码改为多入口配置。

 output:{
       entry:{
            app:"./src/app.ts",
            vender:["vue"]
        },
    filename:"[name].[hash].js",
    path:path.resolve(__dirname,"dist"),
},

可以看出来hash确实是整个项目通用的，打包后的文件如果使用hash那后缀的hash是一样的。

chunkhash：采用hash计算的话，每一次构建后生成的哈希值都不一样，即使文件内容压根
没有改变。这样子是没办法实现缓存效果，我们需要换另一种哈希值计算方式，即chunkhash。
chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk
，生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，
接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其
哈希值不会受影响。

把上边例子的第六行改为filename:”[name].[chunkhash].js”。可以看出来确实根据对应入口文件
输出的chunk文件后缀已经不一样了。
注意：当app入口文件依赖的其他文件也被单独抽离出来打包成一个文件时，比如app.js引入了
index.css，index.css如果没有单独配置入口，那index.css打包后和app.js同属于一个模块，如果
也使用chunkhash那这个文件的chunkhash和app入口文件的chunkhash后缀相同。

contenthash：在chunkhash的说明中最后提示的注意，如果入口文件存在依赖，打包后使用
了相同的我们chunkhash。但是这样子有个问题，如果app.js更改了代码，css文件就算内容
没有任何改变，由于是该模块发生了改变，导致css文件会重复构建。这个时候，以处理css
举例在webpack4 可以使用 mini-css-extract-plugin 插件在更早的版本可以使用extra-text-
webpack-plugin，里面的contenthash保证即使css文件所处的模块里就算其他文件内容改变
，只要css文件内容不变，那么不会重复构建。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports : {
    entry:{
        main:"./src/app.js",
        vender:["vue"]
    },
    output:{
        filename:"[name].[chunkhash].js",
        path:path.resolve(__dirname,"dist")
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename:'[name].[contenthash].css'
        })
    ],
    module:{
          rules:[
                  {
                      test:/\.css$/,
                      use:[MiniCssExtractPlugin.loader,"css-loader"]
                  }
              ]
      },
}

注意：MiniCssExtractPlugin插件在使用时要配合在loader里使用，同时由于style-loader的功能和
MiniCssExtractPlugin冲突，所以不能一起使用。

webpack4学习笔记 基础配置 （二）

1.哈希值：