webpack, babel 프론트엔드 개발환경 세팅

우아한테크코스/우아한테크코스4기

webpack, babel 프론트엔드 개발환경 세팅

FE코크 2022. 2. 22. 01:48

안녕하세요 우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다.

이번주 webpack과 babel로 환경설정을 할텐데...webpack PTSD가 도져서 잠이 안온다.. 그래서 알아봤다

https://www.youtube.com/watch?v=zal9HVgrMaQ

https://www.youtube.com/watch?v=LKkg0h7f6-U

(세상에는 도움을 주시는 분들이 참 많음...)

빠르게 webpack + babel 로 프론트엔트 개발환경 세팅을 알아본다.

1. npm init -y

package.json 파일 생성됨

2. npm install webpack webpack-cli —save-dev

webpack과 webpack-cli 패키지 설치
(npm i webpack webpack-cli -D)
—save-dev, -D 는 개발용 설치(devDependencies)
webpack-cli는 커맨드 라인으로 실행하게 해주는 거다
webpack은 웹팩의 핵심 패키지
webpack-cli는 터미널에서 webpack 커맨드를 실행할 수 있게 해주는 커맨드 라인 도구이다.
두 패키지 모두 개발할 때만 필요한 의존성이기 때문에 -D 옵션으로 설치한다

3. 설정을 위한 webpack.config.js 파일 생성

웹팩 명령어를 실행 할 시, 여기 있는 설정들을 적용한다.

const path  = require('path'); // 파일이나 폴더의 경로 작업을 위한 툴을 제공한다. path는 노드에서 제공하는 path모듈을 사용한다.

module.exports = {
    entry : './src/index.js', // 시작파일, 여기서 시작해서 사용하는 모듈들을 모두 파악한다.
    output : {  //만들어지는 최종 파일을 내보내는 옵션이다.
    	filename : 'main.js', // 파일 이름
		path: path.resolve(__dirname, 'dist')// 폴더를 의미한다. 현재 경로 하위에 dist 폴더를 의미한다.
    }
}

filename, dirname ???

노드는 __filename, __dirname 키워드로 경로에 대한 정보를 제공한다.

// 예시
// 파일의 위치가 /User/coke/temp/sample.js 일 경우

// file 명을 포함한 절대경로
console.log(__filename); // /User/coke/temp/sample.js

// file 명을 제외한 절대경로
console.log(__dirname); // /User/coke/temp

path.resolve([...paths])

https://nodejs.org/api/path.html#pathresolvepaths

Path | Node.js v17.5.0 Documentation

Path# Source Code: lib/path.js The path module provides utilities for working with file and directory paths. It can be accessed using: const path = require('path'); Windows vs. POSIX# The default operation of the path module varies based on the operating s

nodejs.org

여러 인자들을 묶어서 root 경로를 고려한 새로운 경로를 string으로 반환한다.
다양한 예시는 다음 블로그를 참고한다.(갓! 감사합니다.)

https://p-iknow.netlify.app/node-js/path-moudle/

Nodejs, path module, __dirname, __filename 에 대해 톺아보기

Nodejs 들어가며 웹펙을 입문하려 할 때 처음 마주하게 되는게 entry, output 옵션이고, entry, output 옵션을 설정할 때 나 이 쓰이는 것을 볼 수 있다. 필자를 포함한 입문자들은 대충 경로를 설정하는

p-iknow.netlify.app

4. build

package.json 파일에서 scripts에 build 명령어 추가한다.

"scripts": {
    "build": "webpack",
...
}

5. 터미널에서 npm run build

dist 파일에 main.js 파일 생성된다.(index.js와 util.js 파일이 합쳐진)

6. index.html에서 dist파일 안에 생긴 파일 사용

7. npm i html-webpack-plugin

dist 폴더를 배포 할때 사용해야 하는데 js 파일 뿐만 아니라 html 파일도 포함되어야 한다.

https://webpack.kr/plugins/html-webpack-plugin/

HtmlWebpackPlugin | 웹팩

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

webpack.kr

8. webpack.config.js에서 html-webpack-plugin 설정해준다.

// webpack.config.js
const path  = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry : './src/index.js',
    output : {
        filename : 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new HtmlWebpackPlugin({
          template: "./index.html", // template은 만들어진 파일로 html을 만들어 준다.
        }),
    ],
};

9. npm i webpack-dev-server -D

(npm i —save-dev webpack-dev-server)

개발 하기 쉽게 서버를 띄어주는 역할.
개별 서버가 디스트 폴더를 제공한다.

// webpack.config.js
const path  = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry : './src/index.js',
    output : {
        filename : 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new HtmlWebpackPlugin({
          template: "./index.html",
        }),
    ],
    devServer: {
        static: {
          directory: path.resolve(__dirname, "dist"),
        },
        port: 8080,
    },
};

package.json 폴더에서 scripts에 start 명령어 설정한다.

// package.json
"scripts": {
    "start": "webpack serve --open --mode=development",
...
},

터미널에 npm start 입력

js 파일을 수정하면 이제 즉각적으로 반영된다.

10. build 명령어 수정

// package.json
"scripts": {
    "start": "webpack serve --open --mode=development",
    "build": "webpack --mode=production",
...
},

"build": "webpack”으로 유지 한채 npm run build를 하게 되면 mode가 없다고 뜬다. --mode=development로 설정을 하면 개발 모드에 생성되는 많은(보기 불편한...) 여러가지 생성됨 그래서 "build": "webpack --mode=production"으로 설정한다.

11. npm i -D style-loader css-loader

css-loader css 파일을 읽어준다
style-loader는 css-loader가 읽은 css 파일을 스타일 팩으로 만들어서 head에 넣어준다
( <style>태그를 만들어서 <head>안에 넣어준다)
css는 모듈로 작성을 해줘야 한다.

// webpack.config.js

module: {
    rules: [
      {
        test: /\.css$/, //확장자가 css 일때,
		use: ["style-loader", "css-loader"], // use는 뒤에서부터 읽는다, css-loader로 읽고 style-loader로 넣어준다
      },
...
		],
},

12. index.html 에서 script 태그 제거

이제 자동으로 반영되기 때문에 삭제

13. npm i -D mini-css-extract-plugin

css 파일을 만들어서 별도로 가져오는 방식(link)

// webpack.config.js
const path  = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry : './src/index.js',
    output : {
        filename : 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                // use: ["style-loader", "css-loader"],
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            }
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
          template: "./index.html",
        }),
        new MiniCssExtractPlugin({
            filename: "common.css",
        }),
    ],
    devServer: {
        static: {
          directory: path.resolve(__dirname, "dist"),
        },
        port: 8080,
    },
};

14. npm i -D file-loader

이미지 파일 가져오기

// webpack.config.js
module.exports = {
    entry : './src/index.js',
    output : {
        filename : 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                // use: ["style-loader", "css-loader"],
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
            {
                test: /\.jpg$/,
                use: ["file-loader"],
            },
        ],
    },
...
}

15. npm i -D clean-webpack-plugin

사용 하지 않는 파일들을 제거하는 플러그인

// webpack.config.js
const path  = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    entry : './src/index.js',
    output : {
        filename : 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                // use: ["style-loader", "css-loader"],
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
            {
                test: /\.jpg$/,
                use: ["file-loader"],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
          template: "./index.html",
        }),
        new MiniCssExtractPlugin({
            filename: "common.css",
        }),
        new CleanWebpackPlugin(),
    ],
    devServer: {
        static: {
          directory: path.resolve(__dirname, "dist"),
        },
        port: 8080,
    },
};

16. babel 설정하기

npm install --save-dev @babel/core @babel/cli
npm install --save-dev @babel/preset-env
npm i -D babel-loader
.babelrc 파일 생성

// .babelrc
{
    "presets": ["@babel/preset-env"]
}

// webpack.config.js
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                  {
                    loader: "babel-loader",
                    options: {
                      presets: [
                        [
                          "@babel/preset-env",
                          {
                            useBuiltIns: "usage",
                            corejs: "3.6.4",
                            targets: {
                              chrome: "87",
                            },
                          },
                        ],
                      ],
                    },
                  },
                ],
                exclude: /node_modules/,
            },
           ....

참고

http://daleseo.com/webpack-basics/

웹팩(Webpack) 기본 사용법 (CLI)

Engineering Blog by Dale Seo

www.daleseo.com

https://p-iknow.netlify.app/node-js/path-moudle/

Nodejs, path module, __dirname, __filename 에 대해 톺아보기

p-iknow.netlify.app

https://nodejs.org/api/path.html#pathresolvepaths

Path | Node.js v17.5.0 Documentation

nodejs.org

https://poiemaweb.com/es6-babel-webpack-1

Babel | PoiemaWeb

현재 브라우저는 ES6를 완전하게 지원하지 않는다. ES6+(ES6 이상의 버전)를 사용하여 프로젝트를 진행하려면 ES6+로 작성된 코드를 IE를 포함한 모든 브라우저에서 문제 없이 동작시키기 위한 개발

poiemaweb.com

https://velog.io/@code-bebop/babel%EA%B3%BC-webpack

babel과 Webpack

babel을 Webpack에 싸서 드셔보세요

velog.io