[React] 웹팩을 활용한 리엑트 개발 환경 셋팅

웹팩 : 개발 도중 빌드 단계에서 사용

다양한 프레임워크로 프로젝트를 진행하다보면 프론트엔드 개발자는 css 작업을 하게 된다.

하지만 프로젝트가 복잡해지다보면 양이 방대해지기 때문에 CSS 전처리기를 사용한다.

 

리엑트에 scss를 적용하기 위해서는 webpack.config.dev.js 와 webpack.config.prod.js를 수정해야한다.

먼저 node-sass 와 sass-loader를 설치한다. 

 

npm i node-sass sass-loader style-loader css-loader

 

node-sass : scss를 다룰 수 있는 node program이다.

sass-loader : webpack에 필요한 loader이다. 

 

이제 이것들을 webpack에 추가시켜준다. 

 

 

완성된 웹페이지에선  아무런 기능을 하지 않기 때문에 --save-dev 옵션으로 설치

 

npm i -D webpack webpack-cli

 

webpack-cli : 웹팩과 관련한 명령을 수행하는 패키지이다.

 

 

웹팩 설정 

: webpack.config.js 

 

module.exports = {
  entry: "./src/index.js", // 번들링의 시작이 되는 파일 
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader", // creates style nodes from JS strings
          "css-loader", // translates CSS into CommonJS
          "sass-loader" // compiles Sass to CSS, using Node Sass by default
        ],
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"]
  },
  output: { // 빌드된 번들의 저장 옵션 
    path: __dirname + "/dist",
    publicPath: "/",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: "./dist"
  }
};

 

 

 

 

 

 

 

출처

 

https://dinn.github.io/web/webpack-01/

웹팩을 활용한 리액트 개발 환경 세팅 1

 

https://medium.com/@jsh901220/react%EC%97%90-scss-%EC%A0%81%EC%9A%A9%EB%B0%8F-%EA%B8%B0%EB%B3%B8-%EC%82%AC%EC%9A%A9%EB%B2%95-1-c7bd2895f5a6

React에 SCSS 적용및 기본 사용법(1)

 

https://13akstjq.github.io/scss/2019/09/01/Webpack%EC%97%90%EC%84%9C-Sass-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0.html

웹 개발 기술 블로그