Webpack config 설정 예시

GABMIN KIM·2022년 1월 23일

webpack

Webpack

목록 보기

2/7

기본 설정 방법

자세한 설정은 공식 홈페이지 (https://webpack.kr/concepts/)에서 확인 가능하다.

Webpack 설치

npm i webpack webpack-cli

Webpack 설정

webpack.config.js

const path = require('path') // 경로를 쉽게 설정해주는 모듈

module.exports ={
  mode: 'development', // 실제 서비스시에는 production
  devtool: 'eval', // 실제 서비스시에는 hidden-source-map#
  resolve: {
  	extensions: ['.js','.jsx','.css']
    // 모든 파일에 대한 확장자를 적어주면 entry의 app에 확장자를 생략할 수 있다.
    // 웹팩이 알아서 모든 확장자와 파일명을 비교하여 확인해준다.
  },
  
  //입력
  entry: {
    app: ['./client','./example'] 
    // 합치고자하는 js파일을 모두 적어준다.
    // client.js 내부에서 불러오고 있는 다른 js파일들은 웹펙에서 알아서 해결하므로 최상단 파일만 적어주면 된다.
    // 합친 결과로 app.js파일이 생성된다.
  },
  
  //모듈 적용
  module: {
  	rules: [{
    	test: /\.jsx?/, //js 혹은 jsx파일
      	loader: 'babel-loader', //위 파일에 loader를 적용한다.
      	options: { //babel의 옵션 설정
          presets: [
          	'@babel/preset-env', '@babel/preset-react'
          ],
         plugins: [],
        },
    }]
    
  },
  plugins: [], // 확장프로그램과 비슷한 개념  
  
  //출력
  output: {
    path: path.join(__dirname, 'dist'),
    //C:\users\example\webpack\dist 처럼 경로를 정해줘야하지만,
    //path 모듈을 사용하면 위처럼 간단하게 사용이 가능하다.
    filename: 'app.js',
  }
},

client.js

const React = require('react')
const ReactDom = require('react-dom')

const Example = require('./example')

ReactDom.render(<Example />, document.getElementById('root'))

Babel

위처럼 webpack을 실행하게 되면 오류가 발생하게 될 것이다.
이유는 jsx는 자바스크립트 문법이 아니라서 웹팩이 jsx파일을 이해할 수 없기 때문이다.
따라서, Babel을 이용해서 jsx파일을 처리할 수 있다.
또한, Babel에서 jsx파일을 처리할 수 있게끔 설정을 해줘야 한다.

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

@babel/core : babel의 기본적인 파일
@babel/preset-env : 브라우저에 맞게 문법의 버전을 바꿔주는 역할
@babel/preset-react : jsx 지원 가능하게 해주는 역할
babel-loader : Babel과 Webpack을 연결해주는 역할

실행 방법

1. package.json에 명령어를 설정해서 사용하는 방법

"name": "webpack-example",
"version": "0.1.0",
"private": true,
"scripts": {
    "dev": "webpack"
  },
  
  ...

위의 예시처럼 scripts에 dev라는 명령어를 설정해서 사용할 수 있다.

npm run dev

2. npx 명령어를 사용하는 방법

npx webpack

webpack을 실행하게 되면 app.js파일이 생성된다.
이 app.js파일을 html파일에서 불러오게 하여 사용하면 된다.

index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>webpack example</title>
  </head>
  <body>
    <div id="root"></div>
    <script scr="./dist/app.js"></script>
  </body>
</html>