06HMR热加载、source-map调试代码、oneOf配置、缓存

HMR热加载

• 如果需要开启HMR热加载功能，只需要在webpack.config.js中配置

/**
 * HMR: hot module replacement 热模块替换 / 模块热替换
 *      作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）
 *          极大的提升构建速度
 *    样式文件：可以使用HMR功能：因为style-loader内部实现了~
 *    js文件：默认不能使用HMR功能 --> 需要修改js代码，添加支持HMR功能的代码
 *    html文件：默认不能使用HMR功能，同时会导致问题：html文件不能热更新了（不用做HMR功能） 
 *      解决：修改entry入口，将html文件引入
 */
devServer: {
     contentBase: resolve(__dirname, 'build'),
     compress: true,
     port: 3000,
     open: true,
     // 开始HMR功能
     // 当修改了webpack配置，新配置要想生效，必须重启weebpack服务
     hot: true
 }

• js文件：默认不能使用HMR功能 --> 需要修改js代码，添加支持HMR功能的代码
  如：创建一个print.js,暴露一个接口print

console.log('print.js被加载了~~~');

function print(){
    const content = 'hello webpack';
    console.log(content);
}

export default print;

在index.js中引用，判断module.hot热加载模块是否开始，如果开始则重新调用

import '../css/index.less';
import print from './print';

console.log('index.js文件被重新加载了');

print();

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

devtool配置

• 在webpack.config.js直接配置该参数
  devtool: 'source-map'

/**
  * 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-sourrce-map: 外部
  *     错误代码准确信息 和 源代码的错误位置
  *     只能精确到行
  * cheap-module-source-map: 外部
  *     错误代码准确信息 和 源代码的错误位置
  *     module会将loader的source map加入
  * 
  * 内联 和 外部的区别：
  * 1. 外部生成了文件，内联没有
  * 2. 内联构建速度更快
  * 
  * 开发环境：速度快，调休更友好
  *     速度快(eval>inline...)
  *         eval-cheap-source-map
  *         eval-source-map
  *     调试更友好
  *         source-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-source-map
  */

oneOf配置

• oneOf配置
  // oneOf以下loader只会匹配一个
  // 注意：不能有两个配置处理同一种类型文件

缓存

• 缓存：

1. babel缓存:因为js要经过预编译
   cacheDirectory:true
   --> 让第二次打包构建速度更快

/**
 * 正常来讲，一个文件只能被一个loader处理。
 * 当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序
 *     先执行eslint 再执行babel
 */
{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
       presets: [
           [
               '@babel/preset-env',
               {
                   useBuiltIns: 'usage',
                   corejs: {version: 3},
                   targets: {
                       chrome: '70',
                       firefox: '55'
                   }
               }
           ]
       ],
       // 开始babel缓存
       // 第二次构建时，会读取之前的缓存
       cacheDirectory: true
    }
},

2. 文件资源缓存

• hash：每次webpack构建时会生成一个唯一的hash值
  问题：因为js和css同时使用一个hash值。
  如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）
• chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样
  问题：js和css的hash值还是一样的
  因为css是在js中被引入的，所以同属于一个chunk
• contenthash：根据文件的内容生成hash值。不同文件hash值一定不一样
  --> 让代码上线运行缓存更好使用