webpack babel-loder로 실행 & 설정

webpack 공식 문서

webpack package install

webapck babel-loder를 사용하기 위해서 먼저 관련 패키지를 설치하자.

npm i webpack webpack-cli babel-loader

• webpack
• webpack-cli
• babel-loader

설정파일

babel.config.js와 같이 webpack도 설정파일을 만들어보자. webpack.config.js로 프로젝트 루트에 저장!

// webpack.config.js 웹팩 설정파일을 작성하자. 리액트를 하면서 여기저기서 자주 봤던 모습

const path = require('path'); // path 모듈 임포트

module.exports = {
  mode: 'development',
  entry: './src/code.js', // 웹팩 적용할 시작점 파일
  output: {
    // 웹팩 적용후 output 경로와 파일명
    path: path.resolve(__dirname, 'dist'),
    filename: 'code.bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
      },
    ],
  },
  // 웹팩의 압축기능을 잠시 꺼두기 위한 옵션
  optimization: { minimizer: [] },
};

스크립트 작성

  "scripts": {
    "webpack": "npx webpack",
  }

yarn webpack 또는 npm run webpack을 통해 스크립트를 실행시켜보자. webpack이 프로젝트 루트에서 webpack.config.js있는지 먼저 확인 후, 있다면 설정파일을 읽어 실행하게 된다.