1. 프로젝트 생성하고 Webpack4 적용하기

package.json 만들기

 $ npm init -y $ vi package.json
{  "name": "react-redux-webpack4-babel7-material",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "keywords": [],  "author": "",  "license": "ISC"}

index.html, index.js 만들기

$ mkdir src$ cd src$ vi index.html
<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <title>Tutorial</title>  </head>  <body>    <div id="root"></div>  </body></html>
$ vi index.js
(function () {  console.log("Hi!");}());

Webpack4 설치하기

개발 환경에 번들러를 설치합니다.

$ npm install --save-dev webpack webpack-cli webpack-dev-server

여기까지 하면, package.json 파일에 방금 설치한 dependency 값들을 들고있는 devDependencides 필드가 새로 생긴것을 확인할 수 있습니다.
추가로 프로젝트 하위에 package-lock.json 파일이 새로 생긴것을 볼 수 있는데요, 이 파일은 package.json 파일이 수정되면 자동으로 생성되는 파일입니다.

package-lock.json 파일은 의존성 트리에 대한 정보를 담고있는데요, 이는 파일이 작성된 시점의 의존성 트리가 다시 생성되도록 보장합니다.

조금 쉽게말해 이 파일을 git에 커밋을 해두면 해당 레포를 클론받아 작업하는 모든 개발자들이 동일한 버전의 dependency로 작업할 수 있음이 보장됩니다.

보통 node_modules 폴더는 git에 올리지 않기 때문에 package-lock.json 파일은 저장소에 커밋해주어야 합니다.

path 와 htmlWebpackPlugin 설치하기

path: devDependency 의 path 를 지정해주기 위해 필요합니다.
htmlWebpackPlugin: 이 도구는 서버를 띄울때마다 임시 index.html 파일을 만들어 사용할 수 있도록 해주는 툴입니다.

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

Webpack Config 작성하기

앱 하위에 webpack.config.js 파일을 생성해줍니다.

파일명은 이와 같이 설정해주어야 Webpack 이 자동으로 인식하여 실행하게 됩니다.
만약 다른 파일명을 원한다면 run 할때 flag를 사용하여 해당 파일의 위치를 알려주어 명령어를 실행해주어야 합니다.

$ vi webpack.config.js

Dev config 와 Production config 를 나누어 작성할 수도 있지만, Webpack4 에서는 mode 라는 옵션을 지원하기 때문에, 하나의 파일 (webpack.config.js) 에 작성하고 mode 로 분기하는 방식으로 진행했습니다.
즉, 커맨드라인에서 --mode 옵션으로 development or production 을 명시해주고, config 파일에서는 이를 파라미터로 받아 분기하도록 했습니다.

./webpack.config.js

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

module.exports = (env, options) => {
    const config = {
        entry: {
            app: ['./src/index.js']
        },
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'dist')
        }
    }

    if(options.mode === 'development') {
        console.log('dev')
        config.plugins = [
            new webpack.HotModuleReplacementPlugin(),
            new HtmlWebpackPlugin({
                template: path.join(__dirname, 'src', 'index.html')
            })
        ];

        config.devtool = 'inline-source-map';

        config.devServer = {
            hot: true, 
            host: '0.0.0.0',
            contentBase: './dist', 
            stats: {
                color: true
            }
        };
    } else {
        console.log('prod')
    }

    return config;
}

package.json 의 scripts 에 명령어 추가하기

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build-dev": "webpack --mode development",
  "build": "webpack --mode production",
  "dev": "webpack-dev-server --open --mode development"
},

--open 옵션: 서버가 뜨면 자동으로 브라우저가 열리고 서버에 접속합니다.

개발 서버 띄우기

자, 이제 webpack 의 기본 설정이 끝났습니다. 이제 개발 서버를 띄워봅시다!

$ npm run dev

그럼 아래와 같이 8080 포트로 브라우저가 열리면서 index.html 과 app.bundle.js 파일이 <script> 로 삽입된 것을 확인할 수 있습니다.

나머지 build 명령어도 실행해봅시다.

Production 빌드하기

$ npm run build

Webpack이 src 하위의 index.js 파일을 compile 하고 그 결과로 dist/app.bundle.js 를 만들어낸걸 볼 수 있습니다.

Development 빌드하기

$ npm run build-dev

짝짝짝! 👏🏻👏🏻

지금까지 Webpack4 를 앱에 적용해보았습니다.

다음으로는 React, ReactDOM 그리고 Babel 을 사용해보겠습니다.

Previous0. React, Redux 를 선택한 이유 Next2. React 와 ReactDOM 적용하기

Last updated 6 years ago

Was this helpful?

1. 프로젝트 생성하고 Webpack4 적용하기

package.json 만들기

 $ npm init -y $ vi package.json
{  "name": "react-redux-webpack4-babel7-material",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "keywords": [],  "author": "",  "license": "ISC"}

index.html, index.js 만들기

$ mkdir src$ cd src$ vi index.html
<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <title>Tutorial</title>  </head>  <body>    <div id="root"></div>  </body></html>
$ vi index.js
(function () {  console.log("Hi!");}());

Webpack4 설치하기

개발 환경에 번들러를 설치합니다.

$ npm install --save-dev webpack webpack-cli webpack-dev-server

여기까지 하면, package.json 파일에 방금 설치한 dependency 값들을 들고있는 devDependencides 필드가 새로 생긴것을 확인할 수 있습니다.
추가로 프로젝트 하위에 package-lock.json 파일이 새로 생긴것을 볼 수 있는데요, 이 파일은 package.json 파일이 수정되면 자동으로 생성되는 파일입니다.

package-lock.json 파일은 의존성 트리에 대한 정보를 담고있는데요, 이는 파일이 작성된 시점의 의존성 트리가 다시 생성되도록 보장합니다.

보통 node_modules 폴더는 git에 올리지 않기 때문에 package-lock.json 파일은 저장소에 커밋해주어야 합니다.

path 와 htmlWebpackPlugin 설치하기

path: devDependency 의 path 를 지정해주기 위해 필요합니다.
htmlWebpackPlugin: 이 도구는 서버를 띄울때마다 임시 index.html 파일을 만들어 사용할 수 있도록 해주는 툴입니다.

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

Webpack Config 작성하기

앱 하위에 webpack.config.js 파일을 생성해줍니다.

파일명은 이와 같이 설정해주어야 Webpack 이 자동으로 인식하여 실행하게 됩니다.
만약 다른 파일명을 원한다면 run 할때 flag를 사용하여 해당 파일의 위치를 알려주어 명령어를 실행해주어야 합니다.

$ vi webpack.config.js

Dev config 와 Production config 를 나누어 작성할 수도 있지만, Webpack4 에서는 mode 라는 옵션을 지원하기 때문에, 하나의 파일 (webpack.config.js) 에 작성하고 mode 로 분기하는 방식으로 진행했습니다.
즉, 커맨드라인에서 --mode 옵션으로 development or production 을 명시해주고, config 파일에서는 이를 파라미터로 받아 분기하도록 했습니다.

./webpack.config.js

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

module.exports = (env, options) => {
    const config = {
        entry: {
            app: ['./src/index.js']
        },
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'dist')
        }
    }

    if(options.mode === 'development') {
        console.log('dev')
        config.plugins = [
            new webpack.HotModuleReplacementPlugin(),
            new HtmlWebpackPlugin({
                template: path.join(__dirname, 'src', 'index.html')
            })
        ];

        config.devtool = 'inline-source-map';

        config.devServer = {
            hot: true, 
            host: '0.0.0.0',
            contentBase: './dist', 
            stats: {
                color: true
            }
        };
    } else {
        console.log('prod')
    }

    return config;
}

package.json 의 scripts 에 명령어 추가하기

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build-dev": "webpack --mode development",
  "build": "webpack --mode production",
  "dev": "webpack-dev-server --open --mode development"
},

--open 옵션: 서버가 뜨면 자동으로 브라우저가 열리고 서버에 접속합니다.

개발 서버 띄우기

자, 이제 webpack 의 기본 설정이 끝났습니다. 이제 개발 서버를 띄워봅시다!

$ npm run dev

그럼 아래와 같이 8080 포트로 브라우저가 열리면서 index.html 과 app.bundle.js 파일이 <script> 로 삽입된 것을 확인할 수 있습니다.

나머지 build 명령어도 실행해봅시다.

Production 빌드하기

$ npm run build

Webpack이 src 하위의 index.js 파일을 compile 하고 그 결과로 dist/app.bundle.js 를 만들어낸걸 볼 수 있습니다.

Development 빌드하기

$ npm run build-dev

짝짝짝! 👏🏻👏🏻

지금까지 Webpack4 를 앱에 적용해보았습니다.

다음으로는 React, ReactDOM 그리고 Babel 을 사용해보겠습니다.

Previous0. React, Redux 를 선택한 이유 Next2. React 와 ReactDOM 적용하기

Last updated 6 years ago

Was this helpful?