모듈로 코드 구조화하기 | Bundling Fundamentals

[giscus[bot]]

모듈로 코드 구조화하기 | Bundling Fundamentals

프론트엔드 번들링의 모든 것

https://frontend-fundamentals.com/bundling/webpack-tutorial/module-system.html

[ahrrrl]

npm v11 이상에서는 npm init -y를 실행할 때 "package.json"에 "type": "commonjs"가 자동으로 추가됩니다. npm 문서
이 때문에 Webpack 설정 등에서 모듈 시스템 관련 오류(require is not defined 또는 'import' and 'export' may appear only with 'sourceType: module' 등)가 발생할 수 있어요.

저는 "package.json"에서 "type"자체를 지워서 해결했습니다.

[SeongjaeHong]

JS 파일을 모듈로 변환하기 이후 npm run build 실행 시 아래와 같은 에러가 발생합니다.

ERROR in ./main.js 1:0
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> import { emojis } from './emoji.js';
|
| document.addEventListener('DOMContentLoaded', function () {

처음 해보는 거라 잘은 모르지만 CommonJS(CJS)와 ECMAScript Modules(ESM) 차이에 의한 에러라고 하네요. 아래처럼 코드 수정해서 해결했습니다.

webpack.config.js 수정

//webpack.config.js
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: './main.js', // 어떤 파일을 진입점으로 번들링할지
  mode: 'development', // 소스맵 포함, 최소한의 코드 압축(공백 제거, 변수명 단순화 등)
  output: {
    filename: 'bundle.js', // 번들로 만들어질 파일 이름
    path: path.resolve(__dirname, 'dist'), // 번들 파일이 어디에 저장될지
  },
};

package.json 수정

// package.json
{
  "name": "study-bundling",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "module",   <-- commonjs를 module로 수정
  "devDependencies": {
    "webpack": "^5.99.9",
    "webpack-cli": "^6.0.1"
  }
}