[javascript] Webpack으로 모바일 웹 구현 방법

29 Nov 2023

javascript

웹팩(Webpack)은 모듈 번들러로서, 여러 개의 자바스크립트 파일 및 의존 파일들을 하나로 묶어주는 도구입니다. 이번 튜토리얼에서는 웹팩을 사용하여 모바일 웹을 구현하는 방법에 대해서 알아보겠습니다.

웹팩 설치

첫 번째로, 웹팩을 설치해야 합니다. 웹팩은 npm(Node Package Manager)을 통해 설치할 수 있습니다. 프로젝트 디렉토리에서 다음 명령어를 실행하여 웹팩을 설치합니다:

npm install --save-dev webpack webpack-cli

기본 구성

웹팩 구성을 위해 webpack.config.js 파일을 생성합니다. 이 파일은 웹팩이 동작하는데 필요한 구성을 포함하고 있습니다. 다음은 간단한 webpack.config.js 파일의 예시입니다:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

위 구성 예시에서 entry는 웹팩이 번들링할 진입 파일을 나타냅니다. output은 번들링된 파일의 이름과 경로를 설정합니다.

모바일 웹 개발 환경 설정

이제 모바일 웹 개발을 위한 기본적인 환경을 설정해보겠습니다.

CSS Reset: 모바일 브라우저에 대응하기 위해 CSS Reset을 사용하는 것이 좋습니다. 예를 들어, normalize.css를 사용할 수 있습니다.
미디어 쿼리: 모바일 화면 크기에 따라 다른 스타일을 적용하기 위해 미디어 쿼리를 사용합니다. 예를 들어, 다음과 같이 사용할 수 있습니다:

@media screen and (max-width: 768px) {
  /* 모바일 화면 스타일 */
}

@media screen and (min-width: 769px) {
  /* 데스크톱 화면 스타일 */
}

번들 생성

이제 웹팩을 사용하여 번들을 생성해보겠습니다. 위에서 생성한 webpack.config.js 파일을 가지고 다음 명령어를 실행합니다:

npx webpack

위 명령어를 실행하면 src/index.js 파일을 기반으로 번들이 생성되며, dist/bundle.js에 저장됩니다.

번들된 파일 적용

마지막으로 번들된 파일을 웹에서 적용해보겠습니다. HTML 파일에서 다음과 같이 번들된 파일을 참조하면 됩니다:

<!DOCTYPE html>
<html>
<head>
  <title>모바일 웹</title>
</head>
<body>
  <script src="dist/bundle.js"></script>
</body>
</html>

위와 같이 번들된 파일을 로드하면 모바일 웹 개발이 완료됩니다.

결론

이번 튜토리얼에서는 웹팩을 사용하여 모바일 웹을 구현하는 방법에 대해서 알아보았습니다. 웹팩은 여러 개의 자바스크립트 파일을 쉽게 관리할 수 있도록 도와줍니다. 웹팩을 통해 번들링된 파일을 사용하면 모바일 웹 개발을 보다 효율적으로 할 수 있습니다.

목차

웹팩 설치

기본 구성

모바일 웹 개발 환경 설정

번들 생성

번들된 파일 적용

결론