1. HMR (热替换) 功能
2. soure-map （编译后的报错提示）
3. noeof / enforce （loader的执行顺序）
4. webpack 缓存

---

1. HMR 功能

全称 hot Module replacement (热替换)

作用: 一个模块发生变化,只需要重新更新一个模块 ( 不用全部打包 )

配置 webpack.config.js

module.exports = {
    mode:"development"
    devServer:{
        hot:true // 开启HMR
    }
}

• 样式文件 使用 style-loader 内部实现了 HMR
• JS 文件： 默认不支持 HMR, 需要在 js 文件中配置

if(module.host){
    module.hot.accept("./xxx.js",()=>{
        xxx();
        .... xxx文件的执行代码
    });
    ....
}

---

2. soure-map

用于编辑代码的错误信息映射源代码的错误位置

配置 webpack.config.js

devtool:'soure-map'

• 开发环境推荐
  • eval-soure-map
• 生产环境推荐
  • nosoures-soure-map 隐藏所有代码
  • hidden-soure-map 隐藏源码
  • soure-map 开源代码,报错到源码的行级位置

---

3. oneof / enforce

• enforce 优先加载的loader
• oneof 滞后加载的loader

配置 webpack.config.js

module:{
    rules:[
        {
            test:/\.xxx$/,
            laoder:"xxx-loader"
            ...,
            enforce:"pre"
        },
        {
            omeof:[
                {
                    test:/\.xxx$/,
                    laoder:"xxx-loader"
                    ...
                }
            ]
        }
    ]
}

---

4.webpack缓存

缓存一

babel 缓存

配置 webpack.config.js

module:{
    rules:[
        {
            test:/\.js$/,
            loader:"babel-loader",
            options:{
                cacheDirectory:true, // 第二次构建事 会读取之前的缓存
                presets:[
                    "@babel/preset-env",
                    {
                        useBuiltIns:'usage',
                        corejs:{
                            version:3
                        },
                        targets:{
                            chrome:"60"
                        }
                    }
                ]
            }
        }
    ]
}

文件缓存

方式	定义
hash	每一次 webpack 构建都会生成一个新的 hash 值； 如果一个文件被改动，所有文件都会被重新打包（更新 hash）
chunkhash	根据 chunk 生成的 hash 值， 如果打包来源同一个 chunck ，那么 hash 是一样的； 举例： 如果 js 中 引入了 css 文件，这种情况就属于一个 hash 值，当改变 css 文件， js 文件和 css 文件将被会重新打包
contenthash	根据 文件内容生成的 hash，不同文件 hash 值一定是不一样的（作为生产环境的性能优化）

用例

const {resolve} = require("path")
const MiniCssExtractWebpackPlugin = require("mini-css-extract-webpack-plugin")
module.exports={
    output:{
        filename:"js/index[contenthash:10].js", // 配置 contenthash 保留十位
        path:resolve(__dirname,"dist")
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    MiniCssExtractWebpackPlugin.loader,
                    "css-loader"
                ]
            }
        ]
    },
    plugins:[
        new MiniCssExtractWebpackPlugin({
            filename:"css/index[contenthas:10].css" // 配置 contenthash 保留十位
        })
    ],
    mode:"development"
}

使用 node express 测试 webpack 的缓存

创建 server.js

const express = require("express")
​
const app = express();
app.use(express.static("dist",{maxAge:1000*3600})) // 强缓存
​
app.listen(3000)