DBILITY

독거 가능성 100% 노후에 라면값이라도 하게 센스를 발휘합시다!😅
Please click on the ad so that I can pay for ramen in my old age!
点击一下广告，让老后吃个泡面钱吧!
老後にラーメン代だけでもするように広告を一回クリックしてください。

npm webpack 기본 정리 본문

front-end & ui/npm

npm webpack 기본 정리

DBILITY 2023. 3. 16. 12:04
반응형

머리에 기록이 안되니, 정리하는 것도 고생이다.

자본주의 천민의 고달픈 삶~

npm은 node package manager다.

nodejs는 chrome V8 javascript engine으로 build된 javascript runtime, 실행환경이다.

webpack은 javascript module bundler로, html/css/javascript/image/font 등을 하나 또는 여러개로 병합/압축한다.

4.0.0이후로는 설정 파일을 필요로 하지는 않다고 한다.

그러나, 원하는 설정이 있으면 당연히 할 수 있다.

webpack.config.js에 기록한다.

당장 필요한 주요 항목은 entry,module,output, [ mode,devtool,resolve ] 등으로

entry는 말 그대로 시작 대상을 지정하는 것, 즉 입력설정이다.

module은 처리 규칙 설정으로 생각하면 된다. rules에 처리 대상 파일확장자, 제외 대상 ,로더 등 설정한다.

loader는 javascript 파일 이외의 요소(react jsx, css 등) 를 묶을 때 javascript로 변환을 하는 규칙을 적용한다.

output은 처리에 따른 우리가 원하는 결과에 대한 설정으로 path,filename 등을 설정한다.

mode는 development, production, none으로 바로 이해하자.

devtool은 소스맵의 생성여부와 방법을 설정한다. 개발시에는 build,rebuild속도를 위해 eval, 배포용에는 hidden-source-map을 추천한다고 한다.

resolve는 module해석 방식을 변경할 수 있다고 하는데, extensions 옵션은 확장자를 줄 수 있다.

나머지 상세 옵션들은 다음을 참고하자.

https://webpack.kr/configuration/

 

Configuration | 웹팩

웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다.

webpack.kr

기초를 토대로 react-app를 생성해 본다. node는 설치되어 있어야 한다.

intellij에서 New Project, Language는 javascript를 선택해서 프로젝트를 생성한다.

Terminal을 열고 npm init 실행 후 입력 없이 엔터, 완료되면 다음과 같이 package.json이 변경되어 있다.(intellij가 아니면 생성)

{
  "name": "react-hello",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "description": ""
}

webpack설치는 npm install -D webpack webpack-cli를 입력하면 되고, 설치되면 package.json에 devDependencies에 추가 되어 있다.(-D옵션은 개발시에만 사용하겠다는 의미)

{
  "name": "react-hello",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "description": "", 
  "devDependencies": {
    "webpack": "^5.76.2",
    "webpack-cli": "^5.0.1"
  }
}

다음은 npm install react,react-dom 명령으로 설치한다.

{
  "name": "react-hello",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "webpack": "^5.76.2",
    "webpack-cli": "^5.0.1"
  }
}

다음은 babel을 설치해야 하는데, babel이 jsx 등을 javascript로 컴파일(결과물을 작성)해 주는 기능을 한다.

필요한 걸 설치한다. npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react

{
  "name": "react-hello",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.21.3",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.2",
    "webpack": "^5.76.2",
    "webpack-cli": "^5.0.1"
  }
}

react로 hello를 출력하는 component를 작성해 보자.

Hello.jsx ( 확장자 jsx는 순수 javascript와 구분하기 위해 사용 )

import React from "react";
const Hello = (props) => {
    return (<div>Hello</div>)
}
export default Hello;

index.js ( entry 대상 )

import React from "react";
import ReactDOM from "react-dom/client";
import Hello from "./Hello";

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<Hello/>);

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>react-hello</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>

webpack.config.js 

const path = require('path');

module.exports = {
    name:'react-hello-setting',
    mode: "development",
    devtool: "eval",
    resolve: {
        extensions: ['.js','.jsx']
    },
    entry: {
        app: ['./index']
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    presets:[
                        "@babel/preset-env","@babel/preset-react"
                    ]
                }
            }
        ]
    },
    output: {
        path: path.join(__dirname, 'dist'),
        clean: true,
        filename: "app.js"
    }
}

옵션은 상단의 webpack configuration 링크를 참고한다.

package.json에 실행 dev scripts 부분에 작성한다. 

작성하기 싫으면 npx webpack해도 된다.

{
  "name": "react-hello",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev" : "webpack"
  },
  "author": "",
  "license": "MIT",
  "description": "",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.21.3",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.2",
    "webpack": "^5.76.2",
    "webpack-cli": "^5.0.1"
  }
}

Terminal에서 npm run dev. 다음과 같이 정상적인 메시지가 나오면 된다.

asset app.js 1.12 MiB [emitted] (name: app)
runtime modules 1.04 KiB 5 modules
cacheable modules 1.08 MiB
  modules by path ./node_modules/ 1.08 MiB
    modules by path ./node_modules/react-dom/ 1000 KiB
      ./node_modules/react-dom/client.js 619 bytes [built] [code generated]
      ./node_modules/react-dom/index.js 1.33 KiB [built] [code generated]
      ./node_modules/react-dom/cjs/react-dom.development.js 1000 KiB [built] [code generated]
    modules by path ./node_modules/react/ 85.7 KiB
      ./node_modules/react/index.js 190 bytes [built] [code generated]
      ./node_modules/react/cjs/react.development.js 85.5 KiB [built] [code generated]
    modules by path ./node_modules/scheduler/ 17.3 KiB
      ./node_modules/scheduler/index.js 198 bytes [built] [code generated]
      ./node_modules/scheduler/cjs/scheduler.development.js 17.1 KiB [built] [code generated]
  ./index.js 222 bytes [built] [code generated]
  ./Hello.jsx 152 bytes [built] [code generated]
react-hello-setting (webpack 5.76.2) compiled successfully in 1829 ms

브라우저에서 실행해 보면 "Hello"가 출력된다.

대부분 아래와 같이 하거나 ide에서 생성하게 되면 모르는 부분이다.

일단 알고나 있자.

npx create-react-app my-app

hot realod가 필요하다..

Terminal에서 npm i -D react-refresh @pmmmwh/react-refresh-webpack-plugin webpack-dev-server 명령으로 설치하고,

webpack.config.js를 수정했다.

RefreshwebpackPlugin을 선언했고,

module > rules > options안에 plugins 부분

module바로 아래 plugins 부분

마지막 devServer부분을 추가

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

module.exports = {
    name: 'react-hello',
    mode: 'development',
    devtool: 'eval',
    resolve: {
        extensions: ['.js', '.jsx']
    },
    entry: {
        app: ['./index']
    }, //input
    module: {
        rules: [
            {
                test: /\.jsx?/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: [
                        "@babel/preset-env", "@babel/preset-react"
                    ],
                    plugins: [
                        'react-refresh/babel'
                    ]
                }
            }
        ]
    },
    plugins: [
        new RefreshWebpackPlugin()
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        clean: true,
        filename: 'app.js',
    }, //output
    devServer: {
        devMiddleware: {publicPath: '/dist/'},
        static: {
            directory: path.resolve(__dirname),
        },
        compress: false,
        port: 9000,
        hot: true,
        liveReload: false
    }
};

package.json도 script부분을 수정해줬다.

{
  "name": "react-hello",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve --env development"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.21.3",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
    "babel-loader": "^9.1.2",
    "react-refresh": "^0.14.0",
    "webpack": "^5.76.1",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.12.0"
  }
}

이제 수정을 하면 바로 반영이 된다.

반응형
저작자표시 비영리 변경금지

'front-end & ui > npm' 카테고리의 다른 글

npm list extraneous  (0) 2022.01.07
npm package update  (0) 2021.12.24
nodemon security exception  (0) 2021.12.15
npm start Something is already running on port 3000.  (0) 2021.12.13
npm upgrade & package version check, npm init package.json generation  (0) 2021.12.13
공유하기 링크
'front-end & ui/npm' Related Articles more
Comments