2021.04.17

웹팩

• 공식문서 꼭 한 번은 완독하자
• 쉽게 생각해서 웹팩은 리액트 파일을 자바스크립트 파일로 바꿔주는 것이다.
• Node는 자바스크립트 실행기 이다. (Node는 서버가 아니다.)
• 웹팩을 사용하기 위해서는 node가 깔려 있어야 한다.
• node 사이트에서 자신의 os에 맞는 node를 설치한다. (LTS버전을 설치한다.)
• npm init = node module들을 관리하기 위한 package.json을 생성해 준다.
• npm install -D webpack webpack-cli = webpack을 사용하기 위해 설치 (웹팩은 개발할 때만 사용되기 때문에 개발용으로 설치해 준다.)
  • 실제 서비스에서 사용되는 패키지들은 "dependencies"에 기록되고 개발할 때만 사용되는 패키지들은 "devDependencies"에 기록된다.
  • 패키지를 개발용으로 설치하고 싶다면 -D 키워드를 붙여준다.
• webpack.config.js 파일을 생성한다. (이름은 기본적으로 webpack.config.js로 설정하고 다른 이름일 경우 따로 설정을 해줘야 한다.)
• npm install -D @babel/core @babel/preset-env @babel/preset-react babel-loader : 바벨을 설치 해 준다. (jsx파일을 사용하기 위해서는 바벨이 필수적이다.)
  • 목적에 맞게 여러가지 플러그인을 세트로 모아 놓은 것을 preset이라 한다.
  • @babel/core : 최신 문법을 브라우저에서 동작하는 문법으로 바꿔 주는 것
  • @babel/preset-env : 개발자의 개발 환경(타깃 환경)에 맞게 알아서 ECMAScript2015+ 문법을 변환하기 위한 프리셋
  • @babel/preset-react : react를 변환하기 위한 프리셋(JSX 코드를 React.CreateElement호출 코드로 변환)
  • babel-loader : 바벨과 웹팩을 연결해 준다.

const path = require('path'); //node가 설치되어 있으면 자동으로 설치된다. node에서 경로를 쉽게 조작할 수 있게 제공해주는 패키지
const webpack = require('webpack');

module.exports = {
    name: 'service-setting', //어떤 서비스에 대한 웹팩 설정인지 이름  (만드는 서비스 이름을 넣어준다.) 필수요소는 아님!
    mode: 'development', //mode를 작성 개발 : development, 실서비스 : production
    devtool: 'eval', // 개발 : eval, 프로덕션 : hidden-source-map
    resolve: {
        extensions: ['.js', '.jsx', '.css'] //파일들의 확장자를 입력한다.
    },
    //entry, output 제일 중요
    entry: {
       app: './main', //합칠 파일들을 배열 형태로 입력한다.
    }, //입력

    module: {
        rules: [{
            test: /\.jsx?$/,     //규칙을  적용할 파일들을 입력
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env', '@babel/preset-react'],
                plugins: [], //따로 추가해야 하는 플러그인이 있을 경우 여기에 작성한다.
            }, //babel의 옵션을 설정
        }], //여러 개의 규칙을 지정할 수 있으므로 배열 형태로 작성한다.
    },

    plugins: [
        new webpack.LoaderOptionsPlugin({ debug: true }),
    ], //추가적으로 하고 싶은 작업, 플러그인(확장프로그램)들을 전부 여기에 작성한다.

    output: {
        path: path.join(__dirname, 'dist'), // path.join()해주면 경로를 알아서 합쳐준다. __dirname : 현재 폴더의 경로를 담고있다.
        filename: 'app.js', //출력 파일의 이름을 설정
        publicPath: "/dist/",
    }, //출력
    //path : 실제 경로, publicPath : 가상의 경로(webpack-dev-server가 사용하는 결과물간의 상대 결로)
};

• 웹팩에서는 알아서 파일에서 불러오는 다른 파일을 인식하기 때문에 다른 파일에서 불러오는 파일을 entry에 입력하지 않아도 된다.

• 프로젝트의 규모가 커지면 entry에 js, jsx, css 등등 다양한 확장자를 가진 파일들이 들어간다. 그럴때 확장자를 입력하지 않고 resolve 속성을 사용한다.

• 웹팩 설정을 마치고 터미널에 webpack 명령어를 입력하면 알아서 실행된다.

• " 'webpack'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. " 이렇게 에러가 나는 경우

  1. 명령어로 등록을 해준다.

  2. package.json 파일에 scripts로 등록해준다.

         //package.json
         "scripts": {
             "dev": "webpack serve --env development"
         }
     

  3. npx webpack 입력

• babel-loader를 설정하는데 presets에도 설정이 따로 있을 수 있다.

• @babel/preset-env는 자동으로 옛날 브라우저들을 지원해 준다. 하지만 옵션을 통해서 좀 더 구체적인 브라우저를 설정할 수 있다.

  • presets의 옵션을 추가해줄 경우 배열 형태로 작성, 첫 번째 인자로 presets 이름을 입력하고 두 번째 인자로 옵션을 입력

        module : {
            options: {
                presets: [
                    ['@babel/preset-env', {
                        targets: {
                            browsers: ['last 2 chrome versions'], //특정 브라우저만 설정
                        },
                    }],
                    '@babel/preset-react',
                ],
                plugins: [],
            },
        },

  • 참고링크에 browsers에 사용가능한 list들이 나와있다.

  • ex) > 5% in KR : 한국에서 브라우저 점유율이 5%이상인 브라우저는 전부 지원한다는 의미이다.

웹팩데브서버 & 핫리로딩

• npm install -D webpack-dev-server : 개발용 서버 설치
• npm install react-refresh @pmmmwh/react-refresh-webpack-plugin -D : 핫 리로딩시 필요한 플러그인

//webpack.config.js
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
    module : {
            options: {
                presets: [
                    ['@babel/preset-env', {
                        targets: {
                            browsers: ['last 2 chrome versions'], //특정 브라우저만 설정
                        },
                    }],
                    '@babel/preset-react',
                ],
                plugins: ["react-refresh/babel"], //babel-loader plugin에 추가해준다.
            },
    },
    plugins: [
        new RefreshWebpackPlugin()
    ],// plugins에 추가해준다.

    //데브서버도 따로 설정해줘야 한다.
    devServer: {
        publicPath: '/dist/', //output의 publicPath를 그대로 입력
        hot: true,
    },
}

• webpack-dev-server : webpack.config.js파일의 설정대로 빌드한 결과물을 (publicPath에서 설정한 폴더) dist 폴더에 저장을 해둔다. index.html을 실행하면 저장한 결과물을 제공해준다.

  • 기능 : 핫리로딩 기능을 제공한다.

• 핫 리로딩 : 변경점을 강제한다. 즉, 소스코드에 변경점이 생기면 그 변경점을 기준으로 저장한 결과물을 수정한다.

• 핫 리로딩을 위해 설치한 react-refresh @pmmmwh/react-refresh-webpack-plugin플러그인들을 설치하지 않아도 리로딩된다 생각할 수 있지만, 설치하지 않으면 그냥 리로딩이 되는 것이다.

• 리로딩과 핫 리로딩은 다른 것 이다.

• 리로딩은 단순한 새로고침이다. 새로고침은 할때 마다 기존 데이터가 다 날라간다.

• 반면 핫 리로딩은 기존 데이터를 유지하면서 화면을 바꿔주는 것이다.

react 개발 환경 설정

• CRA(Create-react-app) 사용하지 않고 react 개발 환경 설정하기
• html파일에서 CDN으로 스크립트를 불러오지 않고 npm으로 설치한다.
• npm install react react-dom = react를 사용하기 위해 설치
• CDN으로 스크립트 불러와서 설정하는 방법

<!-- 기존(스크립트로 불러올 경우) -->
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
    <!-- 주의: 사이트를 배포할 때는 "development.js"를 "production.min.js"로 대체하세요. -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">  
    //react 코드 작성
    </script>
</body>
</html>

• npm으로 패키지를 설치해서 설정하는 방법

<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
    <div id="root"></div>
    <script src="./dist/app.js"></script>
</body>
</html>

//react 패키지 설치해서 불러올 경우
//JSX 문법을 사용하는 경우 확장자를 .jsx로 한다.
const React = require('react');
const ReactDom = require('react-dom');