[Lunch Box] 2. 프로젝트 및 Webpack 설정

create-reacta-app을 설치하여 프로젝트를 생성한다. 프로젝트를 생성하는 과정은 다른 글에서 쉽게 찾을 수 있어 생략하였다. 최종적으로 완성된 프로젝트의 디렉토리 구조는 다음과 같다.

 

├─build

├─node_modules

├─public

├─src

│  ├─component
│  │  ├─board
│  │  ├─home
│  │  ├─login
│  │  ├─main
│  │  ├─menu
│  │  └─my
│  ├─config
│  ├─css
│  └─images

├─.babelrc

├─.firebaserc

├─.gitignore

├─firebase.json

├─package.json

├─README.md

├─webpack.config.js

 

 

우선 사용중인 package.json과 webpack.config.js에 대해 설명하고자 한다.

 

package.json

{
  "name": "lunchbox",
  "version": "0.1.0",
  "license": "MIT",
  "dependencies": {
    "@material-ui/core": "^4.3.1",
    "@material-ui/icons": "^4.2.1",
    "css-loader": "^3.2.0",
    "firebase": "^6.6.2",
    "firebase-tools": "^7.3.2",
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "react-image": "^2.2.0",
    "react-media": "^1.9.2",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "style-loader": "^1.0.0"
  },
  "scripts": {
    "start": "set NODE_ENV=development&&webpack-dev-server",
    "build": "set NODE_ENV=production&&webpack -p"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "8.0.5",
    "babel-preset-react-app": "8.0.0",
    "copy-webpack-plugin": "^5.0.4",
    "file-loader": "^4.2.0",
    "webpack": "4.30.0",
    "webpack-cli": "3.3.1",
    "webpack-dev-server": "3.3.1"
  }
}

 

dependencies와 devDependencies에는 사용한 모듈과 버전이 나와있는데 직접 입력한 내용이 아니라 모듈을 설치하면 자동으로 다음과 같이 입력된다. devDependencies에 나와있는 모듈들은 프로젝트를 개발하고 테스트 할때 필요한 모듈들이다. 단순히 프로젝트를 그대로 이용하는 목적이라면 denpendencies에 있는 모듈들만 설치하면된다. 이때 서로 영향을 주는 모듈들이 존재하므로 다음과 같이 버전을 맞춰서 설치해야한다.

 

script는 직접 입력한 내용이다. yarn start로 webpack을 이용하여 프로젝트를 실행시키고 yarn build로 webpack을 이용하여 프로젝트를 빌드하도록 설정하였다.

 

webpack.config.js

'use strict'
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
  // 웹팩이 빌드할 파일 (이 파일을 기준으로 import되어 있는 모든 파일을 찾아 하나의 파일로 합침)
  entry:{
    main:['./src/index.js']
  },
  // 웹팩에서 빌드를 완료하면 생성할 빌드 파일명과 생성할 위치
  output:{
    path: path.resolve(__dirname,'./build'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname,'./src'),
        loaders: 'babel-loader'
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      },
      {
        test: /\.(jpg|png)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "[path][name].[hash].[ext]",
          },
        },
      }
    ]
  },
  plugins:[
    new CopyWebpackPlugin([{
      context: './public',
      from: '*,*'
    }])
  ],
  devServer: {
    contentBase: './public',
    host: 'localhost',
    port: 8080
  }
}

Webpack은 모든 파일을 하나의 javascript 파일로 합쳐주는 모듈이다. 파일을 하나로 합치면 여러 이점이 존재하는데 정확히 이해를 하지 못하였고 다른 좋은 글들이 많아 굳이 여기서 설명하지 않았다. 먼저 Webpack 관련 모듈을 설치하고 package.json 파일에서 webpack이 잘 설치 되었는지 확인한다. 그후 webpack.config.js 파일을 생성하여 다음과 같이 설정한다.

 

Webpack은 entry에서 설정한 파일을 기준으로 모든 파일을 찾아서 하나의 파일로 합쳐 빌드한다. 따라서 index.js로 설정한다. output에서는 빌드된 결과물을 설정한다. 다음과 같이 설정하고 빌드를 하면 결과물로 build라는 폴더 내에 main.js라는 파일이 생성된다.

 

Webpack은 javascript만 읽을 수 있어 javascript가 아닌 파일을 읽을때 다른 모듈을 필요로한다. 따라서 css 파일을 읽을 수 있도록 style-loader, 이미지 파일을 읽을 수 있도록 file-loader를 각각 설치하고 다음과 같이 설정한다. 또한 구형 브라우저에서도 최신 javascript를 사용할 수 있도록 코드를 변환하는 babel-loader도 설치하고 다음과 같이 설정한다.

 

마지막으로 .babelrc 파일도 만들고 다음과 같이 설정한다.

 

.babelrc

{
  "presets":["react-app"]
}