본문으로 바로가기

Webpack Guide for beginner #2

category Web Tech/Webpack 2019.08.05 07:52

Webpack 환경 설정 맛보기

앞서 Webpack 의 전반적 이해와 Webpack 사용에 필요한 선행 학습을 진행해 보았으며, 이번 포스팅부터는 Webpack 에 대한 기본 구성부터 단계적으로 학습해 보도록 하겠습니다.   참고로 실무적인 학습 내용은 필자의 직군인 퍼블리셔 관점에서 작성됨을 알려드립니다.

 

사용자 코드작성과 번들 js



프로젝트 초기 설정

이제부터 새로운 프로젝트를 초기화하고, Webpack 을 설치해 보도록 하겠습니다.

아직까지 node.js 설치를 하지 않으셨다면 설치 후에 진행해 주시기 바랍니다.

Webpack 기본(일반적) 구성 절차

  1. webpackwebpack-cli 전역 설치
  2. npm init 으로 package.json 생성
  3. src/index.jsindex.html 생성
  4. 사용자 js 와 html 추가
  5. webapck.config.js 파일 생성

 

webpack, webpack-cli-global 로 설치한 후 package.json 을 생성해도 되고 package.json 을 생성한 후 webpack 을 설치하셔도 무방합니다.

우선 로컬 디렉토리 내의 본인의 새로운 프로젝트 폴더를 생성하고, 몇 가지 파일을 생성해 보도록 합니다.

$ mkdir webpack-task
$ cd webpack-task
$ npm init -y

앞서 학습한 CLI 명령어를 이용하여 디렉토리를 구성해도 되고 편한대로 새로운 프로젝트 네이밍으로 폴더를 구성한 후 npm init -y 를 진행하셔도 됩니다.

다음과 같이 아래 명령어를 수행합니다.

$ npm i webpack webpack-cli -global
$ npm i webpack webpack-cli --save-dev 

webpack 은 웹팩의 핵심 패키지로 Webpack v3 까지는 webpack 만 설치하였으나 Webpack v4 부터는 webpack-cli 도 같이 설치해야 합니다. webpack-cli 는 터미널에서 webpack 커맨드를 실행할 수 있게 해주는 커맨드라인 도구이며, 두 개의 패키지 모두 개발할 때만 필요한 의존성이므로 --save-dev 로 설치하도록 합니다.

그리고 webpack 설치는 webpack.config.js 파일에서 webpack 모듈을 불러다 사용하기 위함도 있습니다.

로컬 설치를 진행하면 node_modules 폴더가 생성되면서 하위 폴더에 다수의 다수 모듈들이 설치되어 있을 것입니다.

 

바로 위에서 수행했던 명령어는 아래와 같이 수행할 수도 있습니다.

$ npm i -g webpack webpack-cli && npm i -D webpack webpack-cli
$ npm i webpack webpack-cli -g && npm i webpack webpack-cli -D

옵션 플래그인   -global(-g), --save-dev(-D) 는 install 바로 뒤에 타이핑해도 되고 마지막 패키지명 뒤에 입력하실 수 있습니다.

 

설치된 패키지를 확인하기 위해 package.json 을 살펴보면 다음과 같습니다.

{
  "name": "webpack-task",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.5"
  }
}

webpack, webpack-cli 는 실제 서비스에 배포되는 것이 아니라 개발에 필요한 도구일 뿐이기 때문에 --save-dev 로 설치하면 devDependencies 에 그 내용이 추가된 것을 확인하실 수 있습니다.

 

다음으로 간단한 index.html, index.js 그리고 webpack.config.js 파일을 생성하고 다음과 같이 작성해 보도록 합니다.

index.html
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Webpack Task</title>
</head>
<body>
	<header>
		<h1>Webpack 학습하기</h1>
	</header>
	<div>
		<p>
			사실 웹팩 설정은 복잡하기로 악명 높지만 다양한 업무를 처리해 줄 수 있는 장점과
            계속해서 빠르고 쉽게(?) 개선되고 있습니다.
		</p>
	</div>
	<script src="dist/bundle.js"></script>
</body>
</html>
// index.js
console.log('Webpack 번들링 실행');
// webpack.config.js
// webpack 명령은 기본적으로 이 설정으로 시작
const path = require('path');

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

 

지금까지 폴더구성은 다음과 같습니다.

webpack=task
|---index.html
|---package-lock.json
|---package.json
|---webpack.config.js
|
\---node_modules
|     \-- 생략
|
\---src
     \--js
         \--index.js

webpack.config.js 설명에 앞서 아래 명령어를 먼저 실행해 보겠습니다.

$ webpack

위 명령어를 실행하면 dist/bundle.js 가 생성되는 것을 확인하실 수 있습니다.

그리고 번들링된 bundle.js 확인해 보면 다음과 같이 webpack 관련 코드와 하단에 index.js 에서 작성했던 콘솔 코드를 확인하실 수 있습니다.

/***/ "./src/js/index.js":
/*!*************************!*\
  !*** ./src/js/index.js ***!
  \*************************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("console.log('Webpack 번들링 실행');\n\n//# sourceURL=webpack:///./src/js/index.js?");

/***/ })

실제 작업 파일은 index.js 지만 서비스(배포)시에는 번들링된 자원을 사용할 것이기 때문에 index.htmlbundle.js 를 불러와 사용해야 합니다.

 

이번에는 여전히 많이 사용하고 있는 jQuery 라는 라이브러리를 불러다가 사용해 보는 예제를 진행해 보겠습니다.

앞서 진행한 것처럼 맛보기(?)이지만 이해를 하는데 도움이 되실 수 있습니다.

아래와 같이 jQuery 를 설치하고 index.js 를 수정해 보도록 합니다.

$ npm i jquery --save
// index.js
console.log('Webpack 번들링 실행');

// require 는 NodeJS 에서 사용되고 있는 CommonJS 키워드이고,
// import 는 ES6(ES2015)에서 새롭게 도입된 키워드로
// 두 개의 키워드 모두 하나의 파일에서 다른 파일의 코드를 불러온다는 동일한 목적을 가지고 있음
import $ from 'jQuery';

(function () {

    $(document).ready(function() {
        $('p').text('jQuery 를 불러와 사용하고 있습니다.')
    });

})();

import $ from 'jQuery'; 는 node_modules 에 있는 jQuery 를 불러와 $ 로 치환한다는 의미입니다.

다시 CLI 에서 webpack 명령어를 수행하면 index.html 을 확인해 보면 문단 텍스트가 바뀌어 있는 것을 확인하실 수 있을 것입니다.

그리고 bundle.js 에는 jquery 와 사용자 js 가 함께 합쳐져 있을 것입니다.

 

ES6 Import/Export

ES6 는 다른 프로그래밍 언어처럼 하나의 자바스크립트 모듈에서 다른 자바스크립트 모듈을 불러다 사용할 수 있도록 importexport 와 키워드를 제공합니다.

 

npm install 시 특정버전 설치하기

$ npm i jquery@2.1.4 --save
# 특정버전을 설치하고자 하는 경우

$ npm i jquery@1 --save
# 1 버전대 중에 최신 버전을 설치하는 경우

 

 

 

webpack.config.js (웹팩 구성 파일)

이제부터 webpack 의 핵심 개념을 이해하기 위해서 구성 파일의 주요 속성인 Entry, Output, Loader, Plugins, mode 에 대해 알아보면서, 필요한 예제도 함께 진행해 보도록 하겠습니다.

 

entry 설정

번들을 설정하기 위한 진입점을 의미합니다.

  • String : 문자열이 들어오는 경우 시작시 로드되는 모듈로 해석
  • Array : 시작시 모든 모듈이 로드됩니다. 마지막 하나가 내보내집니다.
  • Object : 다중 항목 번들이 작성됩니다.

    key 는 청크되는 파일의 이름이고, 값은 문자열 또는 배열이 가능합니다.

 

여러가지 entry 유형 살펴보기

다음 코드는 문자열(String)이 들어오는 경우입니다.

// webpack.config.js
module.exports = {
    entry: './src/myfolder/file.js'
};

아래 코드는 위 코드의 축약본입니다.

// webpack.config.js
module.exports = {
    entry: {
        main: './src/myfolder/file.js'
    }
};

 

다음의 코드는 배열(Array)이 사용되는 경우입니다.

module.exports = {
    entry: {
        main: ['./src/myfolder/file_01.js', './src/myfolder/file_02.js']
    }
};

배열을 전달하면 multi-main entry 가 생성됩니다.
여러개의 의존성 파일을 하나의 chunk 로 모으고 이들의 의존성 그래프를 생성하고 싶을때 유용하게 사용할 수 있지만 이것은 (라이브러리 같은) 하나의 엔트리 포인트를 갖는 어플리케이션 혹은 툴을 빠르게 설정할때 좋은 선택이지만, 확장성이 떨어집니다.

 

웹팩 구성 파일인 webpack.config.js 해당 네이밍으로 정의해야 웹팩이 인식합니다.

네이밍을 다르게 설정하고 싶을 경우 예를 들어 빌드용으로 사용하는 경우 webpack.prod.js 라고 네이밍을 정의한다면 명령 프롬프트에서 실행할 때 webpack --config webpack.prod.js 으로 실행해야 합니다. 이후에 다시 다루도록 하겠습니다.

 

output 설정

 여기서 entry 와 연계하여 output 을 살펴보도록 하겠습니다.

output 은 결과물을 내는 설정으로 생성한 번들을 저장할 위치를 지정할 수 있습니다.

즉, output 은 웹팩이 어디에 번들을 만들어 낼것인지, 어떤 이름으로 파일들을 어떻게 만들 것인지에 대한 것을 정의할 수 있습니다.

config 파일에 output 이 설정되어 있지 않다면 기본 값은 ./dist/main.js입니다. 생성된 번들 파일들이 ./dist 디렉토리 밑으로 들어가게 됩니다.

다음의 코드는 기본 엔트리 포인트output 을 설정한 것 입니다.

module.exports = {
    // 웹팩 v4부터는 mode 필수
    // mode 는 production, development, none 3가지 옵션이 존재
    // mode 의 production 은 각 설정마다 내장된 최적화 옵션을 자동으로 설정하여 준다
    mode : 'development',

    entry : './src/js/index.js',
    output: {
        // filename 으로 생성된 번들링을 어느 경로에 생성할 지를 설정
        // __dirname 은 node 에서 제공하는 node 파일의 경로를 담고 있는 변수
        // __이 붙어 있는 변수들은 항상 무엇인가를 담고있는 특별한 변수들임
        // path 에는 절대 경로 설정(절대값으로 static(정적)으로 사용)
        path: __dirname,
        // bundling 된 결과 파일의 이름
        filename: 'dist/biuld.js'
    }
};

 

앞서 위에서 엔트리 포인트를 배열로 구성했듯이 객체로도 구성할 수 있습니다.

먼저, module1.js, module2.js 파일 생성 후 아래와 같다고 가정해 봅니다.

// module1.js
console.log('module1 실행');
// module2.js
console.log('module2 실행');

 

Multi Entry & output

다음의 코드는 다중 엔트리 포인트와 그에 따른 output 설정입니다.

module.exports = {
    module.exports = {
    mode : 'development', // 웹팩4부터는 mode(development||production)는 필수
    entry: {
        jaehee : './src/js/index.js',
        'module.chunk' : ['./src/js/module1.js', './src/js/module2.js'] // 배열 사용(오른쪽부터 왼쪽으로 읽어감)
    },
    output: {
        path : __dirname,
        filename : 'dist/[name].js' // 위에 지정한 entry 키의 이름에 맵핑되어 파일이 생성됨
    }
};

webpack 을 실행하면 dist 폴더 내에 jaehee.js, module.chunk.js 이 생성되어 있는 것을 확인하실 수 있습니다.

 

Output Name Options

output : {
    // 1. 정적인 절대값으로 이름을 구성
    filename : '[name].js',
    // 2. webpack 을 build 할 때마다 hash 값이 변하면서 output 파일이 계속 변경 생성
    filename : '[hash].js',
    // 3. chunk(덩어리)에 따라서  hash 값이 변하면서 output 파일이 계속 변경 생성
    filename : '[chunkhash].js',
}
  1. [name] : 엔트리명에 따른 output 파일명을 생성
  2. [hash] : 특정 webpack build 에 따른 output 파일명을 생성
  3. [chunkhash] : 특정 webpack chunk 에 따른 output 파일명을 생성

 

 

Loader 설정

webpack 은 모든 파일을 모듈로 관리할 수 있다고 소개했었습니다.
하지만 webpack 은 자바스크립트 파일만 읽어 올 수 있기 때문에, css(스타일시트)나 이미지 등을 webpack 이 읽을 수 있는 자바스크립트로 변경되어야 하는데, Loader 가 webpack 이 이해 할 수 있는 모듈로 변경해 주는 역할을 하게 됩니다.

즉, 로더가 사용되는 이유는 다른 형태의 웹 자원들(html, css, img, pug, ...)을 자바스크립트로 변환하여 로딩되도록 하는 역할을 합니다.  이런 점에서 로더는 다른 빌드 툴들의 "tasks" 와 유사하며, TypeScript 같은 다른 언어를 자바스크립트로 변경하거나 인라인 이미지를 data URL 로 변경할 수도 있습니다. 심지어 로더는 CSS 파일을 자바스크립트 모듈에서 직접 import 할 수 있는 방법도 제공하고 있습니다.

그리고 일반적으로 웹팩을 사용하면 주로 babel 을 함께 사용하는 경우가 많은데, ES2015(ES6+) 이상의 문법을 IE 같은 구형 브라우저와 호환시키기 위해 사용하기도 하고, jsx 같은 react 문법을 컴파일하기 위해 사용하기도 합니다.

 

여기서는 간단히 로더를 사용하여 css 파일을 로드하는 방법에 대해 알아보겠습니다.

다음과 같이 필요한 로더를 설치하도록 합니다.

$ npm i -D css-loader style-loader

 

로더들을 설치한 후 다음과 같이 파일 생성 및 작성해 봅니다.

html
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Webpack Task</title>
</head>
<body>
	<header>
		<h1>Webpack 학습하기</h1>
	</header>
	<div>

		<p>
			사실 웹팩 설정은 복잡하기로 악명 높지만 다양한 업무를 처리해 줄 수 있는 장점과
            계속해서 빠르고 쉽게(?) 개선되고 있습니다.
		</p>
	</div>
	<script src="dist/jaehee.js"></script>
	<script src="dist/module.chunk.js"></script>
</body>
</html>

앞서 번들링한 것을 확인해 보고 싶다면 module.chunk.js 도 import(선택사항)하시면 됩니다.

 

css 를 불러오기 위해 index.js 파일에서 마치 JS 파일을 임포트하듯이 CSS 파일을 임포트 합니다. 아래와 같이 js 파일에서 import 하도록 합니다.

// index.js
import '../css/base.css'

console.log('Webpack 번들링 실행');

 

src/css/base.css 파일 생성 후 아래와 같이 간단히 css 를 작성해 봅니다.

@charset "UTF-8";
body {
	color: red;
}

 

기존 webpack.config.js 에 아래와 같이 추가하도록 합니다.

module.exports = {
    mode : 'development', // 웹팩4부터는 mode(development||production)는 필수
    entry: {
        jaehee : './src/js/index.js',
        'module.chunk' : ['./src/js/module1.js', './src/js/module2.js'] // 배열 사용
    },
    output: {
        path : __dirname,
        filename : 'dist/[name].js' // 위에 지정한 entry 키의 이름에 맵핑되어 파일이 생성됨
    },
    // 로더를 지정하기 위한 module 정의
    module: {
        rules: [ //module.rules 를 사용해 여러개의 로더 지정이 가능.
            {
                // test : 변환 할 파일을 지정
                // 정규 표현식으로 문자열 .css 확장자로 끝나는 것을 찾음.
                test: /\.css$/,
                // use : 변환 할 파일에 지정할 로더를 설정
                // 로더에서 모듈 로딩 순서는 배열의 요소 오른쪽에서 왼쪽으로 로딩하며 진행
                use: ['style-loader', 'css-loader']
            }
        ]
    }
};

위와 같이 구성하신 후 CLI 에서 webpack 을 실행한 후 index.html 을 브라우저에서 확인하면 글자색이 빨간색으로 변경된 것을 확인하실 수 있을 것입니다.

 

module.rules 설정

webpack.config.jsmodule 을 살펴보겠습니다.

module.rules 를 사용해 여러 개의 로더 지정이 가능하며, 이는 로더를 표시하는 방법으로 코드를 간결하고 깔끔하게 유지하는데 도움이 됩니다.

module.rule 내부에  test 는 변환 할 파일을 지정하고,  use 는 변환 할 파일에 지정할 로더를 설정합니다.

그리고 use 주석에도 설명해 놓았듯이 로더는 오른쪽에서 왼쪽으로 평가,실행되며, 위의 예시 코드에서는 css-loader 를 거쳐 style-loader 로 진행됨을 의미합니다.

다시 전체적으로 분석해 보자면, .css 확장자를 가진 모든 css 파일에 대해서 css-loader 를 통해 자바스크립트 파일로 번들링을 하고 style-loader 로 html 에 internal style 로 넣어주는 것 입니다.

그래서 index.html 을 브라우저 개발자 도구의 소스보기에서 확인해 보면 아래와 같이 내부 스타일이 들어가 있는 것을 확인하실 수 있을 것입니다.


지금까지 css 를 번들링하여 사용한 방법은 실무에서 흔히 사용하는 방법이 아닐 것입니다.

일반적으로 css 파일을 내부 스타일로 작성하기 보다 개별 css 파일을 import 하여 사용하는 것이 일반적입니다.

그렇다면 위와 같이 css 를 jaehee.js 에 번들링 하지 않고, 빌드시에 별도의 .css 파일로 분리하여 import 해야 하는데 이때 이용할 수 있는 것이 plugins 입니다. 아래에서 Plugins 에 대해 알아보겠습니다.

 

 

Plugin 설정

플러그인은 웹팩의 핵심으로 로더가 할 수 없는 일들을 수행할 수 있습니다.

Loader 는 모듈을 처리하지만, Plugin 은 번들링된 파일을 처리한다는 점에 차이점이 있습니다.

Plugin 은 번들된 파일을 난독화, 압축할 수도 있고 핫리로딩, 파일복사, 파일추출, 별칭사용 등의 부가적인 작업을 할 수 있습니다.

즉, 플러그인은 파일별 커스텀 기능을 사용하기 위해서 사용하는 것입니다.

플러그인 사용 방법은 인자와 옵션을 사용할 수 있고, plugins 속성에 new 인스턴스를 전달해야 합니다.

그리고 웹팩을 어떻게 사용하느냐에 따라 플러그인 사용법은 여러가지가 될 수 있습니다.

 

플러그인은 기본적으로 다음과 같이 사용합니다.

module.exports = {
    mode : '',
    entry : {},
    output : {},
    module : {},
    plugins : [
        new webpack.optimize.UglifyJsPlugin()
        // ...
    ]
}

 

컴파일된 CSS 를 별도의 CSS 파일로 분리하는 방법

앞선 예제코드에서 로더를 사용하여 css(내부스타일)를 DOM에 주입하였다면 예제 코드를 수정하여 css 파일을 추출해 보는 방법을 진행해 봅니다.

먼저 css 파일을 추출하기 위한 플러그인을 설치하도록 합니다.

$ npm i --save-dev mini-css-extract-plugin

Webpack v4 이전 버전에서는 extract-text-webpack-plugin 을 사용했었으나 Webpack v4부터 css 와 관련한 파일 분리는 mini-css-extract-plugin(Webpack 공식사이트)을 사용하도록 변경되었습니다.

 

 

설치가 끝났다면 기존 webpack.config.jsindex.html을 아래와 같이 수정하도록 합니다.

// webpack.config.js
const path = require( 'path' ); // 경로를 설정
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // node_modules 에서 불러옴

module.exports = {
    mode : 'development',
    entry: {
        jaehee : './src/js/index.js'
    },
    output: {
        path : path.resolve(__dirname, 'dist'),
        filename : '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                // MiniCssExtractPlugin 사용
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ],
                // exclude 는 제외할 폴더나 파일
                // 다른 모듈을 사용해서 컴파일하지 않도록 지정(안전성 확보)
                exclude: /node_modules/
            }
        ]
    },
    // 플러그인 설정
    plugins: [
        // 컴파일 + 번들링 CSS 파일이 저장될 경로와 이름 지정
        new MiniCssExtractPlugin({ filename: 'css/style.css' })
    ]
};

지금까지 output 의 path 에서 __dirname 을 사용했으나 앞으로는 nodeJS 에서 제공하는 path 라는 모듈을 활용하도록 하겠습니다.

 

여기서 잠깐

  • path.join(path1, path2…)

    파라미터로 전달받은 경로를 이어서 하나의 경로로 만듭니다 :

path.join('/foo', 'bar', 'baz/asdf');
// Returns : 'foo/bar/baz/asdf'

 

  • path.resolve([from…], to)

    전달받은 경로의 절대 경로를 리턴합니다 :

path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif');
// 만약에 현재 디릭토리가 /home/myself/node 라고 가정한다면
// 리턴되는 값은 다음과 같이 유효하지 않은 값들을 가공하여 나오게 됩니다.
// '/home/myself/node/wwwroot/static_files/gif/image.gif'

 

path.join() 은 자바스크립트의 내장 API 에 있는 join 과 비슷한 역할을 하지만 해당 API 가 동작하는 OS 의 파일 구분자를 이용하여 파일 위치를 조합하기 때문에 OS 별로 결과값이 다를 것입니다.

path.resolve() 는 모듈을 해석하는데 있어 영향을 미치는 옵션으로 웹팩이 알아서 판단하여 경로나 확장자를 처리할 수 있게 도와주는 옵션입니다.

앞서 본 join() 같은 경우는 그냥 문자열을 합치는 거지만, resolve 는 오른쪽에서 왼쪽을 파일 위치를 구성해 가며 유효한 위치를 찾습니다. 만약, 결과 값이 유효하지 않으면 현재 디렉토리가 사용되며 반환되는 위치 값은 항상 절대 경로(absolute URL)입니다.

resolve 를 사용하는 이유가 웹팩 번들링을 할 때 기타 복잡한 다수의 loader 가 있을 경우 복잡함으로 인해 유효하지 않은 위치가 있다면 자동으로 제거해주고 검증이 된 폴더 위치를 잡아주는 것이 resolve 의 특성이기 때문에 좀 더 안전한 번들링을 위해서 사용하는 측면이 있습니다.

 

상단에서 require( 'path' )path 모듈을 불러오고 output 에서 path.resolve(__dirname, 'dist') 로 경로를 지정하였으며, test 를 통해 load 할 파일을 지정하고 [ MiniCssExtractPlugin.loader, 'css-loader'] 를 통해 오른쪽부터 왼쪽으로 수행하도록 설정했습니다.

그리고 exclude: /node_modules/ 로 제외할 폴더를 정의할 수 있으며, 여기서는 MiniCssExtractPlugin.loader, css-loader 이외의 기타 다른 모더,모듈로 컴파일이 되지 않도록 하기 위한 안전성 확보차원에서 정의하는 것입니다.

반대로 include 로 꼭 이 로더를 사용해서 컴파일할 것들을 지정해 줄 수도 있습니다.

 

마지막으로 css 파일을 추출하기 위한 플러그인 설정을 위해 new MiniCssExtractPlugin({ filename: 'css/style.css' }) 를 작성합니다. 이때 옵션으로 컴파일과 번들링된 최종 파일이 저장될 경로로 번들링된 파일이름을 지정할 수 있습니다.

webpack.config.js 작성이 끝났다면 CLI 에서 webpack 을 실행해 보면 /dist/css/style.css 파일이 추출되어 있는 것을 확인하실 수 있습니다.

 

그리고 index.html 에 추출된 css 를 사용하기 위해 import 시켜주도록 합니다.

index.html
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Webpack Task</title>
	<link rel="stylesheet" href="dist/css/style.css">
</head>
<body>
	<header>
		<h1>Webpack 학습하기</h1>
	</header>
	<div>

		<p>
			사실 웹팩 설정은 복잡하기로 악명 높지만 다양한 업무를 처리해 줄 수 있는 장점과
			계속해서 빠르고 쉽게(?) 개선되고 있습니다.
		</p>
	</div>
	<script src="dist/jaehee.js"></script>
</body>
</html>

index.html 을 브라우저에서 확인하면 css 가 적용된 것을 확인하실 수 있습니다.

 

 

 

Conclusion

이번 챕터까지 웹팩의 주요 속성인 mode, entry, output, module, plugins 에 대해 알아보았습니다.

다음 포스팅에서는 실제로 실무에 필요한 주요 환경 설정과 그에 따른 webpack Dev Server, SASS, 기타 로더, 플러그인 등... 을 다뤄보는 시간을 가져보도록 하겠습니다.



Jaehee's WebClub



'Web Tech > Webpack' 카테고리의 다른 글

Webpack Guide for beginner #3  (0) 2019.08.07
Webpack Guide for beginner #2  (2) 2019.08.05
Webpack Guide for beginner #1  (0) 2019.08.05

댓글을 달아 주세요

  1. coco 2019.08.14 09:43

    정리가 잘된 글 감사합니다!
    기초 부터 다시봐야겠어요~ 즐겨찾기하고가요~