四、webpack优化配置

webpack性能优化

1、开发环境性能优化

 优化打包构建速度

（1）HMR：hot module replacement 热模块替换 

作用：一个模块发生变化，只会重打包这个模块（而不是打包所有模块），极大提升构建速度

样式文件：可以使用HMR功能，因为style-loader内部实现了

JS文件：默认不能使用HMR功能 --->需要修改js代码，添加支持HMR功能的代码,例如

if(module.hot){
    //一旦module.hot为true,说明开启了HMR功能，--->让HMR功能代码生效
    module.hot.accept('./print.js',function(){
        //方法会监听print.js文件的变化，一旦发生变化，其他默认不会重新打包构建
        //会执行后面的回调函数
        print();
    })
}

注意：HMR功能对js文件的处理，只能处理非入口js文件

html文件：默认不能使用HMR功能，同时会导致问题：html文件不能热更新了(不需要HMR功能)

解决方法：修改entry入口，将html文件引入，如以下：

  entry: ['./src/index.js','./src/index.html'],

  优化代码调试

（1）source-map

定义：一种提供源代码到构建后代码映射技术（如果构建后代码出错了，通过映射可以追踪源代码错误位置，并给出相应的错误提示）

2、生产环境性能优化

        优化打包构建速度

        优化代码运行的性能