webpack 之 HMR热更新 source-map配置

HMR热更新

1.配置热更新，在devServer中配置hot，开启HMR功能

 devServer:{
        contentBase: resolve(__dirname,'build'),//自动构建目录，打包后的文件夹
        compress:true,
        port:3000,
        open:true,
        hot:true
    }

2.此时样式文件已经可以实现热更新，因为style-loader内部实现了,但是js和html文件会出现问题。

 （1）解决html文件问题，将entry改为数组，引入index.html文件，

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

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

（2）解决js文件问题，配置js文件

js文件：默认不能使用HMR功能 --需要修改js代码，添加支持，入口js文件是没法处理的，这里处理非入口的print.js文件

import print from './print'

print();

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

 source-map配置

 1.在项目中添加devtool配置

devtool:'source-map' //cheap-module-souce-map

2.参数介绍

/**
 * source-map :一种提供源代码到构建后代码的映射技术（如果构建后代码出错，可以通过映射追踪源代码错误）
 * [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
 * 
 * source-map:外部
 *  错误代码准确信息 和 源代码的错误位置
 * inline-source-map:内联
 * 错误代码准确信息 和 源代码的错误位置
 * 只生成一个内联source-map
 * hidden-source-map:外部
 * 错误代码的错误原因，但是没有错误位置
 * 不能追踪源代码错误，只能提示到构建后代码的错误位置
 * eval-source-map:内联
 * 每个文件都生成对应的source-map，都在eval
 * 错误代码准确信息 和 源代码的错误位置
 * nosources-source-map:外部
 * 能找到错误代码的准确信息，但是没有任何源代码信息
 * cheap-source-map:外部
 * 提示错误信息，和源代码的错误位置，但是只能精确到某一行
 * cheap-module-source-map
 * 错误代码准确信息 和 源代码的错误位置
 * module会将loader的source map加入
 * 
 * 内联 和 外部的区别：1.外部生成了文件，内联没有  2.内联构建速度更快
 * 
 * 开发环境：速度快，调试更友好
 *   速度快(eval>inline>cheap>...)
 *      eval-cheap-source-map
 *      eval-source-map
 *   调试更友好
 *      souce-map
 *      cheap-module-source-map
 *      cheap-source-map
 * 
 *    --> eval-source-map 调试更友好/  eval-cheap-module-source-map 性能更好
 * 
 * 生产环境：源代码要不要隐藏？调试要不要更友好
 *    内联会让代码体积变的非常大，所以在生产环境中不使用内联
 *    nosources-source-map 代码全部隐藏
 *    hidden-source-map 只隐藏源代码，会提示构建后代码错误信息
 * 
 *    -->source-map / cheap-module-souce-map
 */

2.react项目中devtool配置如下

devtool: isEnvProduction
      ? shouldUseSourceMap
        ? 'source-map'
        : false
      : isEnvDevelopment && 'cheap-module-source-map',