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

你可能感兴趣的:(06HMR热加载、source-map调试代码、oneOf配置、缓存)