TIL_201005(Webpack, Babel 그리고 React [개발 환경 구성])

 

 

 

npx create-react-app MyProject

프로젝트를 시작하기 위해 습관적으로 작성하던 명령어를 버리고 직접 개발 환경을 구성하기로 했습니다. 당연하게 실행되는 것들이 왜 그렇게 작동하는지 알아야 할 것 같았습니다. 

 

Learn Webpack for React

여기를 참고하여 하나씩 따라 해 보겠습니다.

 

 

Initial Dependencies

디렉토리를 생성하고 이동한 다음 package.json을 생성하여 초기화합니다.

mkdir MyProject && cd MyProject
npm init -y

 

 

Setting up Webpack

 

npm i -D webpack webpack-cli webpak-dev-server

npm으로 webpack과 커맨드 라인 인터페이스, 개발 서버를 위한 패키지를 받습니다.

 

touch webpack.config.js

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  // 여기에 webpack 구성이 들어갑니다.
};

webpack 구성 파일을 생성하여 기본 구성을 작성합니다.

module.exports = {
  mode: 'development',
  entry: './src/index.js',  // 시작 파일
  output: {
    filename: 'bundle.[hash].js',  // 출력 파일([hash]에 컴파일 될 때 생성 한 해시가 들어갑니다.)
  },
}

애플리케이션의 디버깅을 위한 source map을 생성하는 devtool을 추가합니다. 밑에 추가한 'inline-source-map'은 개발에서만 사용되며 다른 옵션은 webpack devtool 에서 볼 수 있습니다.

module.exports = {
  ...
  
  devtool: 'inline-source-map',
};

 

 

 

이제 모듈을 추가할 차례입니다. 구성에 추가하기 전에 먼저, Babel을 설정하겠습니다.

npm i -D babel-loader @babel/core @babel/present-env @babel/preset-react @babel/plugin-proposal-class-properties @babel/plugin-syntax-dynamic-import

 

 

babel-loader  :  Babel 및 Webpack을 사용하여 Javascript 파일을 트랜스 파일할 수 있습니다.

@babel/core  :  Babel의 핵심

@babel/preset-env  :  ES2015, ES2016 또는 ES2017로 작성된 파일을 감지하고 트랜드 파일합니다.

@babel/preset-react  :  Babel에게 React를 사용할 것이라고 알려줍니다.

@babel/plugin-proposal-class-properties  :  클래스 속성을 사용합니다.

@babel/plugin-syntax-dynamic-import  :  동적 import를 사용할 수 있습니다.

touch .babelrc

// .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-class-properties"
  ]
}

이렇게 Babel 구성을 마치고 webpack.config.js로 돌아가서 모듈을 추가합니다.

module.exports = {
  ...
  
  module: {
    rules: [
      // 첫번째
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
};

다음은 style-loader와 css-loader를 모듈에 추가합니다.

npm i -D style-loader css-loader

module.exports = {
  ...
  
  module: {
    rules: [
      // 첫번째
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      // 두번째
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localsConvention: 'camelCase',
              sourceMap: true,
          },
        ],
      },
    ],
  },
};