이번 블로그에서는 자바스크립트 파일에 Webpack을 적용하는 방법을 알아보겠습니다. Webpack은 모듈 번들러로서, 여러 개의 자바스크립트 파일을 하나의 파일로 묶어주는 역할을 합니다. Gulp는 자바스크립트 개발 작업을 자동화하는 도구로, Webpack과 함께 사용하면 좀 더 효율적으로 개발할 수 있습니다.
필요한 도구 설치
먼저 필요한 도구들을 설치해야 합니다. Node.js가 설치되어 있다고 가정하고, 아래 명령어를 이용하여 Gulp와 Webpack을 전역으로 설치합니다.
npm install -g gulp webpack
프로젝트 폴더에서도 Gulp와 Webpack을 설치해야 합니다. 아래 명령어를 이용하여 로컬 프로젝트에 설치합니다.
npm install --save-dev gulp webpack
Gulp 설정 파일 작성
프로젝트 폴더에 gulpfile.js라는 이름의 파일을 생성하고, 아래와 같이 Gulp 설정을 작성합니다.
const gulp = require('gulp');
const webpack = require('webpack');
const webpackStream = require('webpack-stream');
const webpackConfig = require('./webpack.config.js');
gulp.task('build', function () {
return gulp.src('src/js/main.js')
.pipe(webpackStream(webpackConfig), webpack)
.pipe(gulp.dest('dist/js'));
});
위 코드에서 gulp.task 함수를 이용하여 build라는 Gulp 작업을 정의합니다. src/js/main.js 파일을 Webpack을 사용하여 묶고, dist/js 폴더에 결과 파일을 저장합니다. webpack.config.js는 Webpack 설정 파일로, 해당 파일에는 웹팩 설정을 작성해야 합니다.
Webpack 설정 파일 작성
프로젝트 폴더에 webpack.config.js라는 이름의 파일을 생성하고, 아래와 같이 Webpack 설정을 작성합니다.
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/js/main.js',
output: {
path: path.resolve(__dirname, 'dist/js'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
};
위 코드에서 mode를 production으로 설정하여 최적화된 출력을 생성합니다. entry는 웹팩이 번들링을 시작할 파일을 지정합니다. 번들된 파일은 output에 설정한 경로와 파일 이름으로 생성됩니다. module 설정에서는 Babel을 사용하여 자바스크립트 파일을 트랜스파일링하고, exclude를 사용하여 node_modules 폴더를 제외한 파일들에 대해서만 Babel을 적용합니다.
Gulp 작업 실행
터미널에서 아래 명령어를 입력하여 Gulp 작업을 실행합니다.
gulp build
위 명령어를 실행하면 src/js/main.js 파일을 Webpack을 사용하여 dist/js/bundle.js 파일로 묶고 저장합니다.
결론
위에서 설명한 방법을 통해 Gulp와 Webpack을 사용하여 자바스크립트 파일에 Webpack을 적용할 수 있습니다. 이를 통해 개발 작업을 더욱 효율적이고 관리하기 쉽게 할 수 있습니다.