webpack.config.js 를 ESM 방식으로 바꾸어 dev server를 구축하기

1. 문제 사항

webpack을 ESM을 기반으로 dev server를 구축을 시도하나, 문제가 생겨 기록

1. webpack의 dev server를 사용하기 위해서는 webpack.config.js파일이 필요한데, 이 config 예제가 애초부터 CJS로 되어있고, ESM예제가 없다.
   예제

---

2. 문제 원인

• 상기 기재한 바와 같다.

---

3. 해결 방안

• webpack.config.js를 ESM으로 변경할 수 있다.
  CJS모듈 기반 프로젝트를 ESM기반으로 바꾸기
• 변경하는 예시 코드
  (단, build등의 설정이 빠져있는 완전하지 않은 설정 파일이다.)

//webpack.config.js
import htmlWebpackPlugin from 'html-webpack-plugin';

export default {
  mode: 'development',
  entry: {
    index: './src/index.js',
  },
  devtool: 'inline-source-map',
 devServer: {
   static: './dist',
 },
  plugins: [
    new htmlWebpackPlugin({
      title: 'Development',
    }),
  ]
};

---

4. 비고

• 여기에 기재된 코드들은 모두 시행착오에 의한 코드이며, 완전하지 않고, 정돈되지 않았으며, 결국 파기되었다.
• 왜 ESM을 고수하는가?
  • 앞으로 이 프로젝트에서 사용할 three.js는 ESM을 사용하는데, ESM과 CJS의 혼용을 가급적 피하고 싶음

---

5. 문제파악을 위한 시행 착오

• 없음

---

6. 문제 해결을 위한 시행착오

-그냥 webpack.config.js가 없어도 구동할 수 있는가?

• 시도 : 프로젝트에서 webpack.config.js를 제거한다.
• 결과 :
  관련 메시지 (터미널 콘솔)

  WARNING in configuration
  The 'mode' option has not been set, webpack will fallback to 'production' for this value.
  Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
  You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

-> 이런게 있다고는 하는데...

• ESM방식으로 강제로 해 보았다.
  • 시도 : 모듈(html-webpack-plugin)을 강제로 ESM방식으로 import
  • 결과 : 해당 모듈은 CJS방식으로 만들었으므로 ESM방식으로 import할 수 없다는 오류 발생

• 그냥 예시대로 적용해 보았다.
  • 시도 : 그냥 예시대로 적용해보기
  • 결과 : 성공

다음 코드를 적용하였다.

  entry: {
    index: './src/index.js',
  },
  devtool: 'inline-source-map',
 devServer: {
   static: './dist',
 },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Development',
    }),
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
};

• 단, 이 경우 ESM과 CJS를 혼용하게 되는 것이다. 혼용이 가능한지에 대해서는 주의깊게 살펴볼 것.
  -> 권장사양 아님.

• skypack.dev에서 제시하는 npm install 없는 방식으로 시도하기

  • 시도 : 모듈들을 skypack.dev에서 type : module (ESM)이 될 수 있도록 import하는 방식으로 수정해보기.
    CJS모듈 기반 프로젝트를 ESM기반으로 바꾸기
  • 결과 : 계속 다음과 같은 오류가 발생함
    -> 해당 오류는 package.json에 type을 module (ESM)로 설정했을 때 발생한다.

• CJS로 되어있던 webpack.config.js를 ESM으로 다음과 같이 수정하였다.

//webpack.config.js
import { htmlWebpackPlugin } from 'https://cdn.skypack.dev/html-webpack-plugin';

export default {
  mode: 'development',
  entry: {
    index: './src/index.js',
  },
  devtool: 'inline-source-map',
 devServer: {
   static: './dist',
 },
  plugins: [
    new htmlWebpackPlugin({
      title: 'Development',
    }),
  ]
};

• 이로 인하여 발생한 오류

[webpack-cli] Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. Received protocol 'https:'
    at new NodeError (node:internal/errors:371:5)
    at defaultResolve (node:internal/modules/esm/resolve:1032:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:475:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:245:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:79:40)
    at link (node:internal/modules/esm/module_job:78:36) {
  code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME'
}

• 상기 오류를 참고하여, 다음과 같이 설정하였다.

//webpack.config.js
import htmlWebpackPlugin from 'html-webpack-plugin';

export default {
  mode: 'development',
  entry: {
    index: './src/index.js',
  },
  devtool: 'inline-source-map',
 devServer: {
   static: './dist',
 },
  plugins: [
    new htmlWebpackPlugin({
      title: 'Development',
    }),
  ]
};

• skypack.dev의 usage를 그냥 가져오면 안된다. 이것은 html용이다.