webpack优化

1.HMR：hot module replacement 热模块替换

作用：一个模块发生变化，只会重新打包这一个模块，而不是打包所有的模块

module.exprots = {
    devServer: {
        hot:true //开启HMR
    }
}

css文件可以使用HMR功能，因为style-loader内部实现了； js文件默认不能使用HMR； html文件默认不能使用HMR，且会导致html文件不能热更新（将html文件引入entry入口配置即可，但是依然无法使用HMR）

2.devtool配置：source-map

3.oneOf

把loader配置包裹在oneOf内，打包时每个文件只会被匹配的loader处理一次

4.开启缓存

//babel缓存：
{
    test: /\.js$/,
    exclude:/node_modules/,
    loader:'babel-loader',
    options:[
        cacheDirectory:true
    ]
}

文件资源缓存 通过修改文件名来更新缓存，文件名可以用hash值来修改 hash：每次webpack构建时会生成一个唯一的hash值，问题：因为js和css使用同一个hash值，重新打包会导致缓存全部失效； chunkhash：根据chunk生成的hash值，如果打包来源于同一个chunk，那么hash值就一样 contenthash：根据文件内容生成hash值，不同文件的hash值一定不一样

5.tree shaking

打包时去除无用代码 条件：1.必须使用ES6模块化语法 2.开启production环境 问题：有时候会将引入的css文件去掉 解决：在package.json 中配置sideEffects ，例如"sideEffects":["*.css"]

6.code split

代码拆分 1.配置webpack.config.js中entry多入口 2.配置webpack.config.js中optimization

optimization:{
    splitChunks:{
        chunks:'all'
    }
}
//1.可以将node_modules中的代码单独打包一个chunk最终输出
//2.自动分析多入口chunk中，有没有公共的文件，如果有会打包成单独的一个chunk

7.懒加载

//点击按钮#btn后触发回调，加载js.js文件
document.getElementById('btn').onclick = () => {
    import(/* webpackChunkName: 'test', webpackPrefetch:true */'./js.js').then(({fun})=>{
        fun();
    })
}
//懒加载：当文件需要时才加载
//webpackPrefetch预加载：其他资源先加载，配置文件在使用之前加载
//正常加载：并行加载（同时间加载多个文件）