课时-16.md

课时 16：严格区分路径大小写

有时我们经常会出现这样的情况，明明本地编译没有问题，但是上线 jenkins 编译的时候就会报错，这种问题往往会花费我们较长的时间才能发现这个 bug，原来是本地路径的大小写出现了问题，引用路径时我们本地是不区分大小写的。举个例子

└──── src
   │── Index.js
   └── main.js

上面的路径中 Index.js 的首字母是大写，但是我在 main.js 用小写去引用它

main.js

import Index from "./index.js";

这样在本地是不会报错的，但是当你用 Jenkins 上线的时候，就会报错找不到 ./index.js 模块

所以我们需要一个插件，在我们开发时就严格检查大小写，这样就不会出现这样的问题了。

我们使用 case-sensitive-paths-webpack-plugin 插件来实现它

// [CaseSensitivePaths 严格区分大小写]
module.exports = ({ config, webpackVersion, resolve, options }) => {
  return () => {
    // webpack 5 不兼容
    if (parseInt(webpackVersion) >= 5) return;
    config
      .plugin("case-sensitive-paths")
      .use(require("case-sensitive-paths-webpack-plugin"));
  };
};