웹팩 기본 사용법(with react)

웹팩의 설치는 npm install -g webpack입니다.

// 웹팩 기본 사용법

// calc.js
export function mul (a, b) {
  return a*b
}

// main.js
import {mul} from './calc'
const a = mul(3, 5)
console.log(a)

$ mkdir out
$ webpack main.js -o out/test.js

 

config 사용하기

// webpack.config.js

module.exports = {
    entry: './main.js',
    output: {
        filename: 'out/test.js'
    }
}

$ webpack 명령을 실행하면 dist/out/test.js 파일이 생성됩니다.

$ webpack --config webpack.config.js 와 같이 사용하면 설정파일 이름이 바뀌어도 적용할 수 있습니다.

$ webpack // 개발 전용 빌드
$ webpack -p // 배포 전용으로 최적화해서 빌드
$ webpack --watch // 개발 전용으로 감시 모드를 사용합니다

 

리액트를 위해 사용하는 명령어들은 다음과 같습니다.

$ npm install --save-dev webpack # 웹팩 설치
$ npm install --save-dev react react-dom # 리액트 설치
$ npm install --save-dev babel-loader babel-core # 바벨 로더, 바벨 코어 설치
$ npm install --save-dev babel-preset-es2015 babel-preset-react # 프리셋-es2015, 프리셋-리액트

 

react를 위한 webpack 설정은 다음과 같습니다.

아래의 파일을 프로젝트의 package.json이 있는 곳에 위치해 줍니다.

// webpack.config.js
module.exports = {
  entry: './src/main.js',
  output: {
    filename: './out/bundle.js'
  },
  module: {
    rules: [
      {
        test: /.js$/,
        loader: 'babel-loader',
        options: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
}