Webpack 사용하기

의존 관계에 있는 모듈들을 하나의 자바스크립트 파일로 번들링하는 모듈 번들러

별도의 모듈 로더가 필요없다 ⇒ html 파일에서 script 태그로 다수의 자바스크립트 파일을 로드해야 하는 번거로움도 사라진다

yarn add -D webpack webpack-cli
yarn add -D babel-loader

Webpack이 모듈을 번들링할 때 ES6+ 코드를 ES5 코드로 트랜스파일링하도록 babel-loader를 설치

webpack.config.js Webpack이 실행될 때 참조하는 설정 파일

const path = require('path');

module.exports = {
    // enntry file
    entry: './src/index.js',
    // 컴파일 + 번들링된 js 파일이 저장될 경로와 이름 지정
    output: {
        path: path.resolve(__dirname, 'dist/'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\\.js$/,
                include: [
                    path.resolve(__dirname, 'src/')
                ],
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
												plugins: [],
                    }
                }
            }
        ]
    },
    devtool: 'source-map',
    // <https://webpack.js.org/concepts/mode/#mode-development>
    mode: 'development'
};

"scripts": {
    "build": "webpack -w"
},

실행 결과 dist폴더에 bundle.js이 생성된다.

<!DOCTYPE html>
<html>
<body>
  <script src="./dist/bundle.js"></script>
</body>
</html>

이제 컴파일하고 실행해보자.

yarn build

WSL2 (Ubuntu 20.04.1 LTS) 사용하는데 /mnt/c 관련 경로 설정에 버그가 있는 것 같다.