从2方面进行缓存
babel 和 资源
开发环境中用的是style-loader 和 HMR
生产中不能用上述两种，因为HMR是基于devServer的，style-loader要被插件替换
一、babel处理：开启babel缓存
让第二次打包构建速度更快

                    {
                        ...commonJsLoader,
                        loader:'babel-loader',
                        options:{
                            presets:[
                                [
                                    '@babel/preset-env',
                                    {
                                        useBuiltIns:'usage',
                                        corejs:{
                                            version:3
                                        },
                                        targets:{
                                            'chrome':50
                                        }
                                    }
                                ]
                            ],
                            //开启babel缓存，
                            //第二次构建才会读取缓存，速度更快
                            cacheDirectory:true
                        }
                    },

二、资源缓存，文件名上加hash值
让代码上线缓存更好使用
hash：每次webpack构建后，生成的唯一hash值
问题：因为js和css同时使用一个hash值，如果重新打包，会导致所有缓存失效（我确只改动了js文件，没改css文件）
可以应用的图片和字体上
chunkhash：根据chunk生成的hash值，如果打包生成同一个chunk，hash值就一样。一个入口文件生成一个chunk，如果这个chunk内没有代码更改，多次打包hash一致
不能应用在图片和字体上
contenthash：根据文件的内容生成hash，不同的文件hash值一定不一样，并且如果1个文件内容没有变，打包多少次hash值都不变。
可以应用的图片和字体上

启动服务，建立与src同级别的server.js 用node server.js启动服务
server.js代码如下

/**
 * 服务器代码
 * 启动服务器2中方式
 * nodemon server.js (需要全局安装 npm i nodemon -g)
 * 
 * node server.js
 * 
 * 访问服务器地址：http://localhost:3000
 */
const express = require("express");

const app = express();

//缓存1小时
app.use( express.static('build', {maxAge:1000*3600}))

app.listen(3000)

查看nextwork从缓存读取

image.png

缓存1小时

image.png

1、filename:'js/out.[hash:10].js',
2、filename:'css/h.[hash:10].css'

解决：输出的文件名字增加chunkhash值

真正解决：输出的文件名字增加contenthash值