[ Node ] webpack 사용하기

2022. 7. 3. 21:19

필요 프로그램

NodeJS

Bundling

번들링이란 것은 묶는다는 뜻으로 뭔가를 묶는 작업이라는 것을 알 수 있게 해줍니다. 정확하게 번들링이란 모듈들의 의존성 관계를 파악하여 그룹화 시켜주는 작업을 뜻합니다. 즉, 분리된 모듈들을 하나로 합쳐준다 라고 이해하면 편합니다.

:: 모듈( Module ) : 분리된 파일

파일을 분리하는 이유는 작업의 효율성을 위해서 입니다. 스크립트의 크기가 커지고 복잡해지면 단순히 하나의 파일이나 클래스로만 관리하기에는 그 복잡성이 감당이 되지 않습니다.

그렇기 때문에 하나하나 따로 떼어내 모듈로서 작업을 할 필요가 있는 것입니다.

그렇다고 모듈들이 각각 하나만으로 존재하는 독립적인 존재는 아닙니다. 다른 모듈들과 연계성을 띄어주어야 합니다.

그래서 모듈 내부에 import로 외부 모듈의 기능을 가져오고, export로 외부 모듈에서의 접근을 허용하여 모듈의 기능을 내보내줍니다.

이렇게 보면 import와 export하면 된다고 생각할 수 있지만, 여러 파일들을 브라우저에서 로딩하면 네트워크가 그만큼 소모되어 속도가 저하될 수 있습니다. 또한 여러 파일들을 로딩한다는건 각 모듈간의 변수 충돌등의 위험성도 일어날 수 있다는 뜻이됩니다.

이런 각각의 분리된 자바스크립트를 모아서 묶어주는 작업을 하는 것이 번들링입니다.

Bundling 도구

requireJS, AMD, UMD, ES6 모듈 등 다양하게 존재합니다. 웹팩은 이 모두를 지원해줍니다. 그리고 파일 분할 기능이 있기 때문에 원하는 코드만 따로 분리해서 압축하는 것도 가능합니다.

이러한 장점들 때문에 크고 복잡하며 다양한 리소스들이 존재하는 프로젝트에서는 웹팩을 사용하는 것이 좋습니다.

webpack 사용해보기

1. 원하는 폴더 npm init

// 생성한 폴더 내부
$ npm init

2. html, js 생성

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bundling</title>
    <script src="dist/bundle.js"></script>
</head>
<body>
    
</body>
</html>

src/app.js

alert('app.js 생성완료');

3. npm install

$ npm install webpack --save-dev

$ npm install webpack-cli

// 의존성 설치
$ npm install --dev

4. webpack.config.js 생성

web.pack.config.js

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

webpack 홈페이지 바로가기

5. webpack 실행하기

$ webpack

// 변경이 있을때마다 반응할 수 있도록 감지해서 번들링을 해주는 기능
$ webpack --watch

dist 파일에 bundle.js 파일이 생성된 것을 확인 할 수 있습니다.

jQuery와 함께 사용하기 + app.js에 새로운 js파일 require시키기

app.js

const data = require('./data.js');
const $ = require('jquery');

window.onload = function() {
    // 단일
    $('body').append(`<h1>이름 : ${data.group[0].name}`);
    
    // 반복문
    $.each(data.group, function(key, value) {
        $('body').append(`<h1>name${key} : ${value.name}`);
    });
}

:: window.onload : 페이지의 모든 요소들이 로드 된 이후에 호출됩니다. [ 한 페이지에 하나만 적용됩니다. 두 개 이상 사용시 뒤쪽에 사용한 window.onload가 작동합니다. ]

data.js

const group = [
    {
        name: 'shiro'
    },
    {
        name: 'new'
    },
    {
        name: 'alpha'
    },
    {
        name: 'bbb'
    },
];

module.exports = {
    group: group
}

app.js에서 css 가져오기

1. npm install

$ npm install css-loader style-loader --save-dev

2. 규칙설정하기

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { test: /\.css$/i, use: ['style-loader', 'css-loader'] }
        ]
    },
    mode: 'development'
}

mode: 'development' 적용 이유

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

mode가 설정되지 않아서 production모드인지 development모드인지를 설정해 줍니다.

dev-server 설치하기

1. npm install

$ npm install webpack-dev-server --save

$ npm install --save-dev html-webpack-plugin

html-webpack-plugin : webpack 번들을 제공하는 html파일 생성을 단순화 시켜줍니다.

2. package.json 설정하기

  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --entry ./src/app.js --output-filename ./dist/bundle.js --open"
  },

3. webpack.config.js 설정하기

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

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { test: /\.css$/i, use: ['style-loader', 'css-loader'] }
        ]
    },
    mode: 'development',
    plugins: [new HtmlWebpackPlugin()]
}

4. npm start

$ npm start

실행시켜주면 아래 그림처럼 localhost:8081이 작동됩니다.

babel 설정하기

1. npm install

$ npm install --save-dev babel-loader @babel/cli @babel/core @babel/preset-env

@babel/cli : 터미널에서 바벨 명령어를 사용할 수 있도록 도와줍니다.

@babel/core : 바벨의 핵심 기능을 포함합니다.

@babel/preset-env : ES6의 문법을 ES5의 문법으로 사용할 수 있도록 ES6의 문법을 트랜스파링을 해주는 플러그인입니다.

2. webpack.config.js

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

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { test: /\.css$/i, use: ['style-loader', 'css-loader'] },
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/,
                options: {
                    presets: ['@babel/preset-env']
                }
            },
        ]
    },
    mode: 'development',
    plugins: [new HtmlWebpackPlugin()]
}

3. ./dist/index.html 열어보기

index.html 파일이 생성되고, 실행시켰을때 정상작동되는 것을 확인할 수 있습니다.

저작자표시 비영리 변경금지 (새창열림)

'NodeJS > NodeJS' 카테고리의 다른 글

[ NodeJS \| EJS ] EJS 사용하기 ( Feat. json파일 불러오기 ) (0)	2023.05.24
[ NodeJS ] nodemailer 사용하기 (0)	2022.11.30
[ NodeJS ] fs (0)	2022.07.16
[ NodeJS ] crypto 암호화 복호화 (0)	2022.07.15
[ Node ] nodemon 사용하기 (0)	2022.07.07

코린이[코딩 어린이]

[ Node ] webpack 사용하기

'NodeJS > NodeJS' 카테고리의 다른 글

+ Recent posts

티스토리툴바