5.1.1 HMR（模块热替换）

HMR: hot module replacement 热模块替换 / 模块热替换
作用：一个模块发生变化，只会重新打包构建这一个模块（而不是打包所有模块） ，极大提升构建速度
代码：只需要在 devServer(webpack.config.js) 中设置 hot 为 true，就会自动开启HMR功能（只能在开发模式下使用）

  1. devServer: {
  2.   // 开启HMR功能
  3.   hot: true
  4.   //默认为true，即开启热更新功能。
  5.   liveReload: true, 
  6. }

每种文件实现热模块替换的情况：

  • 样式文件：可以使用HMR功能(hot: true时)，因为开发环境下使用的 style-loader 内部默认实现了热模块替换功能

  • js 文件：默认不能使用HMR功能（修改一个 js 模块所有 js 模块都会刷新）—> 实现 HMR 需要修改 js 代码（添加支持 HMR 功能的代码）（react、vue内部实现了js该功能）

    1. //入口文件 index.js
    2. import print from './print';
    3. // 绑定
    4. if (module.hot) {
    5. // 一旦 module.hot 为true，说明开启了HMR功能。 --> 让HMR功能代码生效
    6. module.hot.accept('./print.js', function() {
    7.   // 方法会监听 print.js 文件的变化，一旦发生变化，只有这个模块会重新打包构建，其他模块不会。
    8.   // 会执行后面的回调函数
    9.   print();
    10. });
    11. }

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

  • html 文件: 默认不能使用 HMR 功能（html 不用做 HMR 功能，因为只有一个 html 文件，不需要再优化）使用 HMR 会导致问题：html 文件不能热更新了（不会自动打包构建）解决：修改 entry 入口，将 html 文件引入（这样 html 修改整体刷新）
    1. entry: ['./src/js/index.js', './src/index.html']

    5.1.2 source-map

    source-map：一种提供源代码到构建后代码的映射的技术,提供更好的开发环境调试模式 （如果构建后代码出错了，通过映射可以追踪源代码错误）
    参数：[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
    代码：
    1. module.exports = {
    2. //与model同级
    3.   devtool: 'eval-source-map'
    4. }
    内联和外部的区别：1. 外部生成了SourceMap文件，内联没有 2. 内联构建速度更快
模式 解释
eval 默认值 每个module会封装到 eval 里包裹起来执行，并且会在末尾追 加注释 //@ sourceURL.
source-map 外部， 错误代码准确信息 和 源代码的错误位置
hidden-source-map 外部，错误代码错误原因，但是没有错误位置（为了隐藏源代码），不能追踪源代码错误，只能提示到构建后代码的错误位置
inline-source-map 内联，生成一个 DataUrl 形式的 SourceMap 文件 ，误代码准确信息 和 源代码的错误位置
eval-source-map 内联，每一个文件都生成对应的 source-map，都在 eval 中，错误代码准确信息 和 源代码的错误位
nosources-source-map 外部，错误代码准确信息，但是没有任何源代码信息（为了隐藏源代码）
cheap-source-map 外部，错误代码准确信息 和 源代码的错误位置，只能把错误精确到整行，忽略列
cheap-module-source-map 外部，错误代码准确信息 和 源代码的错误位置，module 会加入 loader 的 source-map

开发/生产环境可做的选择：
开发环境：需要考虑速度快，调试更友好

  • 速度快( eval > inline > cheap >… )
    1. eval-cheap-souce-map
    2. eval-source-map
  • 调试更友好
    1. souce-map
    2. cheap-module-souce-map 推荐
    3. cheap-souce-map

最终得出最好的两种方案 —> eval-source-map（完整度高，内联速度快） / cheap-module-souce-map（错误提示忽略列但是包含其他信息，内联速度快）

生产环境： 一般不会开启sourcemap功能，1.文件体积大 2.需要考虑源代码要不要隐藏，调试要不要更友好

  • 内联会让代码体积变大，所以在生产环境不用内联
  • 隐藏源代码
    1. nosources-source-map 全部隐藏
    2. hidden-source-map 只隐藏源代码，会提示构建后代码错误信息

最终得出最好的两种方案 —> source-map（最完整） / cheap-module-souce-map（错误提示一整行忽略列）

eslint

eslint配置跟webpack无关，但在工程化开发环境中，它往往是不可或缺的。

方式一：不通过文件配置 .eslintrc.json 配置eslint方法如下

  • js 语法检查 - 使用airbnb(npm.js搜索eslint-config-airbnb-base)的规则安装
    • airbnb规则 - npm install —save-dev eslint eslint-config-airbnb-base eslint-plugin-import
    • 已废弃的eslint-loader(不建议) - npm install —save-dev eslint-loader
    • 新eslint(建议（需要eslint7+）) - npm install —save-dev eslint-webpack-plugin
    • 参考下方“旧代码汇总”

方式二：通过文件配置 .eslintrc.json

配置eslint，只需要在根目录下添加一个.eslintrc文件(或者.eslintrc.json, .js等)。 当 然，我们可以使用eslint工具来自动生成它：
npx eslint --init

  1. xy@melodyWxydeMacBook-Pro webpack5demo % npx eslint --init
  2. ✔ How would you like to use ESLint? · syntax
  3. ✔ What type of modules does your project use? · esm
  4. ✔ Which framework does your project use? · react
  5. ✔ Does your project use TypeScript? · No / Yes
  6. ✔ Where does your code run? · browser
  7. ✔ What format do you want your config file to be in? · JSON

生成了一个配置文件（.eslintrc.json)，这样我们就完成了eslint的基本规则配置。
eslint配置文件里的配置项含义如下：

  1. env 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。此处使用
    的 browser 预定义了浏览器环境中的全局变量，es6 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
  2. globals 脚本在执行期间访问的额外的全局变量。也就是 env 中未预定义，但我
    们又需要使用的全局变量。
  3. extends 检测中使用的预定义的规则集合。
  4. rules 启用的规则及其各自的错误级别，会合并 extends 中的同名规则，定义冲
    突时优先级更高。
  5. parserOptions ESLint 允许你指定你想要支持的 JavaScript 语言选项。
    ecmaFeatures 是个对象，表示你想使用的额外的语言特性，这里 jsx 代表启用
    JSX。ecmaVersion 用来指定支持的 ECMAScript 版本 。默认为 5，即仅支持
    es5，你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本。你
    也可以用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或
    2017（同 8）或 2018（同 9）或 2019 (same as 10)。上面的 env 中启用了
    es6，自动设置了ecmaVersion 解析器选项为 6。 plugins plugins 是一个 npm
    包，通常输出 eslint 内部未定义的规则实现。rules 和 extends 中定义的规则，
    并不都在 eslint 内部中有实现。比如 extends 中的
    plugin:react/recommended，其中定义了规则开关和等级，但是这些规则如何
    生效的逻辑是在其对应的插件 ‘react’ 中实现的

执行eslint ./src 得到被警告的代码 -> 修改

.eslintrc.json

  1. //添加一个规则 不管console
  2. {
  3.     "rules": {
  4.         "no-console": "off" // 关闭console报错
  5.     }
  6. }

eslint插件

当配置了eslint后就可以使用vscode的eslint插件，实现实时报错修改。
eslint插件https://www.cnblogs.com/chengqiang521/p/15128442.html 设置保存自动修复报错

结合webpack使用

eslint-loader已废弃建议使用eslint-webpack-plugin(需要eslint7+)
具体配置见 “旧代码汇总”

npm i -D babel-loader eslint-loader @babel/cor

  1. {
  2.   test: /\.(js|jsx)$/,
  3.   exclude: /node-modules/,
  4.   use: ['babel-loader', 'eslint-loader']
  5. },

因为我们使用了devServer，因此需要在devServer下添加一个对应的配置参数： 

  1. devServer: {
  2.     liveReload: false, //默认为true，即开启热更新功能。
  3. },

现在我们就可以实时地看到代码里的不规范报错啦 。

git

.git\hooks
vscode设置默认行位字符未LF，git提交不允许行位字符未CRLF
image.png