[Webpack] case sensitive paths plugin

$ webpack --mode=development

Mac에서 위와 같이 build 하는 스크립트를 실행하면 문제 없이 잘 돌아가는데 

docker에서 실행하면 에러가 발생하는 경우가 있다.

> ts-vue@1.0.0 build /homepage
> webpack --mode=development

Hash: 70e9fe19d88415050f7f
Version: webpack 4.38.0
Time: 3973ms
Built at: 08/14/2019 10:05:57 AM
     Asset       Size  Chunks                    Chunk Names
  build.js   1.22 MiB    main  [emitted]  [big]  main
index.html  202 bytes          [emitted]
Entrypoint main [big] = build.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./src/index.ts] 323 bytes {main} [built]
[./src/routes/index.ts] 1.38 KiB {main} [built] [1 error]
[./src/store/constants.ts] 77 bytes {main} [built]
[./src/store/index.ts] 451 bytes {main} [built]
[./src/store/modules/popup.ts] 179 bytes {main} [built]
[./src/store/modules/product.ts] 392 bytes {main} [built]
    + 20 hidden modules

ERROR in ./src/routes/index.ts
Module not found: Error: Can't resolve '../components/test1' in '/homepage/src/routes'
 @ ./src/routes/index.ts 4:0-40 15:23-28 23:23-28 37:33-38 45:33-38
 @ ./src/index.ts

ERROR in /homepage/src/routes/index.ts
./src/routes/index.ts
[tsl] ERROR in /homepage/src/routes/index.ts(5,19)
      TS2307: Cannot find module '../components/test1'.
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 2 hidden modules
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! ts-vue@1.0.0 build: `webpack --mode=development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the ts-vue@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

에러는 위와 같다.

읽어보면  Module not found: Error: Can't resolve '../components/test1' in '/homepage/src/routes'  test1 모듈을 찾을 수 없다고 한다.

 

문제가 되는 /homepage/src/routes/index.ts(5, 19)를 보면 폴더이름은  T est1인데  t est1라고 적어놨다.

---

왜 로컬에서 빌드할 때는 잘 돌아갔던 것일까.

내가 사용중인 Mac OS file system은 case insensitive하기 때문에 위와 같은 오타가 있어도 잘 동작했다. 

하지만 Docker file system은 case sensitive하다. (참고 : Docker file system sharing)

따라서 위와 같이 대소문자 구분을 하지 않았다면 배포 시에 오류가 발생할 수 있다.

---

webpack 플러그인 중에 case sensitive paths 가 있다.

대소문자를 다르게 처리하는 파일 시스템에서도 모두 동일하게 동작시키게 하기 위해 웹팩 실행 시 file path의 대소문자가 정확히 일치하는지 체크한다.

$ npm install --save-dev case-sensitive-paths-webpack-plugin

case sensitive paths webpack plugin 설치 & 의존성 추가

// webpack.config.js

const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); // add

module.exports = {
  // ...
  plugins: [
    // ...
    new CaseSensitivePathsPlugin() // add
  ]
};

웹팩에 플러그인 추가.

 

local에서 빌드 결과

이제 로컬에서 build나 dev-server를 실행할 때도 위와 같은 에러를 뱉어서 배포 시 발생할 에러의 위험성을 줄여준다.

---

깃허브

 

add CaseSensitivePathsPlugin