웹팩 최소설정으로 리액트 개발환경

create-react-app이 아니라 최소의 리액트 파일로 개발하려할때 필요

 

webpack과 webpack-cli를 dev dependency에 설치한다.

npm i -D webpack webpack-cli

jsx, html, image, png등을 변환하기위해 설치

npm i -D css-loader style-loader
npm i file-loader
npm i html-plugin -D
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader @babel/plugin-proposal-class-properties

script에 build에 내용을 webpack으로 변경

 

위 스크립트를 실행해보자

npm run build

 

에러가 발생하는데 최소한의 옵션을 설정해줘야한다.

설정파일들을 만들어보자

 

.babelrc

{
    "presets":["@babel/preset-en", "@babel/preset-react"]
}

 

webpack.config.js

const path = require('path');

module.export = {
    mode: 'development',
    entry:{
        main: './src/app.js'
    },
    output:{
        path: path.resolve('./dist'),
        filename: '[name].js'
    }
}

webpack에게 .js 즉 entry가 어디에있는지 알려줘야함

output은 여러개의 모듈을 하나로만들어서 저장시킬 위치를 얘기한다.

이제 default.css폴더를 추가해서 app.js에 임포트하고 npm run build하면 에러가발생한다.

이는 css관련된 webpack설정이 필요하다.

npm i -D css-loader

www.valentinog.com/blog/webpack/#working-with-css