[React] CRA없이 React사용해보기 - Webpack

youngseo·2022년 5월 6일
0

REACT

목록 보기
4/52
post-thumbnail

CRA없이 React사용해보기 - Webpack

Babel이 컴파일러라면 Webapck은 번들러입니다.

번들러란?

번들러란 분리된 자바스크립트와 CSS모듈 코드를 브라우저에 최적화된 여러개의 파일로 결합합니다. React어플리케이션에 널리 사용되는 번들러에는 webpack과 Browserify가 있습니다.

Webpack 설정

1. 관련 패키지 설치

$ npm i -D webpack webpack-cli html-webpack-plugin babel-loader
  • webpack : 웹팩을 실행하기 위해 필수적인 패키지
  • webpack-cli : 터미널에서 웹팩을 돌리기 위해 필요한 패키지
  • html-webpack-plugin
  • babel-loader : 웹팩이 파일을 불러들일 때도 JSX파일을 읽어야 하는ㄷ네 이 과정을 할 수 있도록 도와줍니다.

2. webpack.config.js

const path = require("path")

module.exports = {
  mode: "development",
  entry: "./src/index.js", //1. 진입점 설정
  output: { //2. 번들링한 결과를 어디에 세팅할건지?
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js' //파일 이름 지정
  },
  module: {//3. 번들링 하면서 추가할 수 있는 rule 설정
    rules: [{
      test: /\.js$/, //모든 .js파일을 읽겠다.
      use: 'babel-loader' //읽을 때 babel-loader를 참고하겠다.
    }],
  },
  optimization: { //4. 압축기능
    minimizer: [] //압축기능을 일시적으로 꺼놓음
  }
};

상세설명

  optimization: {
    minimizer: []
  }

웹팩은 기본적으로 자바스크립트 파일을 압축하게 되어 있습니다. 그런데 babel이 제대로 일을 했는지도 봐야하기 때문에 일단 이 압축 기능을 잠시 꺼준 것입니다.

$ npx webpack


dist폴더 안에 bundle.js라는 이름으로 파일이 생성된 것을 확인할 수 있습니다.

이제 bundle.js 파일과 index.html파일을 하나의 파일로 붙여줘야합니다. 이런 일을 자동으로 해주는 플러그인이 바로 html-webpack-plugin입니다.

const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  module: {
    rules: [{
      test: /\.js$/,
      use: "babel-loader"
    }],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html" 
    })
  ],
  optimization: {
    minimizer: []
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js" //파일 이름 지정
  },
};
$ npx webpack

3. Hot Module Replacement

새로고침 없이 변경 내용을 런타임에 업데이트할 수 있도록 돕습니다.

$ npm i -D webpack-dev-server 

Webpack.config.js

  devServer: {
    static: "./dist", 
    hot: true,
  }
  • dist파일에 업데이트가 발생할 때마다 바로바로 런타임에 업데이트하는 명령어가 실행됩니다.
$ npx webpack serve

0개의 댓글