๐ ์นํฉ์ ์ฌ์ฉํ๊ธฐ ์ , ์๊ณ ์์ผ๋ฉด ์ข์ ๋ฐฐ๊ฒฝ ์ง์๋ค
์นํฉ์ ์ฌ์ฉํ๊ธฐ ์ , Node.js & NPM์ด ํ์ํฉ๋๋ค. ํด๋น ๋๊ตฌ๋ค์ ๋ํ ๋ฐฐ๊ฒฝ ์ง์์ด ์์ผ๋ฉด ์นํฉ์ ๋ค๋ฃจ๋๋ฐ ๋์์ด ๋ฉ๋๋ค. ํด๋น ๋ฐฐ๊ฒฝ ์ง์์ด ์๋ ๋ถ๋ค์ ์นํฉ์ผ๋ก ๋ฐ๋ก ๋์ด๊ฐ์ ๋ ์ข์ต๋๋ค.
โจ Node.js
๋ธ๋ผ์ฐ์ ๋ฐ์์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์คํํ ์ ์๋ ํ๊ฒฝ์ ์๋ฏธํฉ๋๋ค.
โจ NPM(Node Package Manager)
์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ค์นํ๊ณ ๊ด๋ฆฌํ ์ ์๋ ํจํค์ง ๋งค๋์ ์ ๋๋ค.
์ฃผ์ ๋ช ๋ น์ด
- npm init : ๋ช ๋ น์ด ์คํ ์, package.json ํ์ผ์ด ์์ฑ๋ฉ๋๋ค.
- npm init -y : ๋ช ๋ น์ด ์คํ ์, package.json ํ์ผ์ด ์์ฑ๋ฉ๋๋ค.
- npm install ${๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ด๋ฆ} : ํด๋น ๋ช
๋ น์ด๋ก ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์น ์, ํด๋น ํ๋ก์ ํธ์ node_modules ํด๋๊ฐ ์๊น๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์ค์น๋์ด ์๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค. (์ฐธ๊ณ ๋ก install ๋ช
๋ น์ด๋ i๋ก ์ถ์ฝํ ์ ์์ต๋๋ค)
- ์ฃผ์ ์ต์
--save-dev & --global
- --save-dev ์ต์ : ํด๋น ์ต์ ์ ์ฌ๋ถ๊ฐ ๊ฐ๋ฐ์ฉ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ฐฐํฌ์ฉ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ๊ตฌ๋ถํ ์ ์์ต๋๋ค. ๋ฐ๋ผ์ ํด๋น ์ต์ ์ ์ฌ์ฉํ๋ฉด ๋ฐฐํฌํ ๋, ๊ฐ๋ฐ์ฉ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋น ์ง๊ฒ ๋ฉ๋๋ค. (์ฐธ๊ณ ๋ก --save-dev ์ต์ ์ -D๋ก ์ถ์ฝํ ์ ์์ต๋๋ค)
- --global ์ต์ : node_modules ํจํค์ง๊ฐ ์๋ ์ ์ญ์ผ๋ก ์ค์นํฉ๋๋ค. (์ฐธ๊ณ ๋ก --global ์ต์ ์ -g๋ก ์ถ์ฝํ ์ ์์ต๋๋ค)
- ์ฃผ์ ์ต์
--save-dev & --global
- npm uninstall ${๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ด๋ฆ} : ํด๋น ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๊ด๋ จ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ชจ๋ ์ญ์ ํฉ๋๋ค.
NPM์ ์ ์ฌ์ฉํ๋ฉฐ, ์ด๋ค ์ฅ์ ์ด ์์๊น?
- ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ HTML ์ค๊ฐ์ ์ฝ์ ํ๋ค๋ฉด(CDN ๋ฐฉ์) ์ง์ ์ฐพ์์ผ ํฉ๋๋ค. ์ด๋ ๊ฒ ๋๋ฉด ๋ฒ์ ๊ด๋ฆฌ๊ฐ ์ด๋ ต๊ณ , ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์กด์ฑ์ด ์ฎ์์ ๋ ๋ฌธ์ ๊ฐ ์๊น๋๋ค. ๋ฐ๋ผ์ NPM์ ์ฌ์ฉํด์ package.json ํ ๊ณณ์์ ๊ด๋ฆฌํ๋ค๋ฉด ์ข ๋ ์ฉ์ดํฉ๋๋ค.
- CDN ๋ฐฉ์์ ์ผ์ผ์ด ์ง์ ํ๊ทธ๋ฅผ ์ฐพ์์ ๋ค๊ณ ์์ผ ํ๊ธฐ ๋๋ฌธ์ ๋ฒ๊ฑฐ๋กญ์ต๋๋ค. NPM์ ์ฌ์ฉํ๋ค๋ฉด ๋ช ๋ น์ด ํ ์ค๋ก ์ฝ๊ฒ ์ถ๊ฐํ ์ ์์ต๋๋ค.
โจ ์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋ ๊ด๋ จ๋ ๋๊ตฌ๋ค
Path
ํ์ผ ๊ฒฝ๋ก๋ฅผ ์์ ํ๊ฒ ์ค์ ํ๊ธฐ ์ํด ์ฌ์ฉํ๋ ๋ชจ๋์ ๋๋ค.
var path = require('path');
Path | Node.js v16.9.1 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
AMD & Common.js
์๋ฐ์คํฌ๋ฆฝํธ์ ๋ชจ๋ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ ๋ ์ฃผ์์ ๋๋ค.
- Common.js : ๋ธ๋ผ์ฐ์ ๋ฟ๋ง ์๋๋ผ ์๋ฒ ์ฌ์ด๋ ๊ฐ๋ฐ์์๋ ์ฌ์ฉํ๊ธฐ ์ฉ์ดํ๋๋ก ๋ง๋ค์ด์ก์ต๋๋ค. node.js์์ ์ฌ์ฉ ๊ฐ๋ฅํฉ๋๋ค. (require, module exports๋ฅผ ์ฌ์ฉํฉ๋๋ค)
- AMD : ๋น๋๊ธฐ ๋ชจ๋์ ๋ํ ํ์ค์์ ๋๋ค. ๋ชจ๋์ด ๋ก๋ฉ๋ ๋๊น์ง ๋๊ธฐ๋ก ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ , ๋น๋๊ธฐ ๋ชจ๋ ๋ฐฉ์์ผ๋ก ํจ๊ณผ๋ฅผ ๋ฐํํ ์ ์์ต๋๋ค. (define(), require()๋ฅผ ์ฌ์ฉํฉ๋๋ค)
ES6 Modules
import & export๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ฝ๋๋ฅผ ๋ชจ๋ํ ํ ์ ์๋ ๊ธฐ๋ฅ์ ๋๋ค. ๋ชจ๋ํ๋ ๋ค๋ฅธ ํ์ผ์ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฅ์ ํน์ ํ์ผ์์ ์ฌ์ฉํ ์ ์๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
- export ๋ณ์, ํจ์ : ๋ค๋ฅธ ํ์ผ์์ ๊ฐ์ ธ๋ค ์ธ ๋ณ์๋ ํจ์์ ์์ export๋ผ๋ ํค์๋๋ฅผ ๋ถ์ ๋๋ค. export๋ ํ์ผ์ ์ํฌํธ๋ก ๋ถ๋ฌ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- import { ๋ถ๋ฌ์ฌ ๋ณ์ or ํจ์ ์ด๋ฆ } form 'ํ์ผ ๊ฒฝ๋ก'; : ์ต์คํฌํธ๋ ๋ณ์๋ ํจ์๋ฅผ ์ค๊ดํธ {}์ ์ ์ธํ๊ณ , ํ์ผ ๊ฒฝ๋ก๋ฅผ ๋ช ์ํ๋ฉด ๋ฉ๋๋ค.
ES6 ๊ธฐ๋ณธ ๋ฌธ๋ฒ๋ค์ด ์ต์ ๋ธ๋ผ์ฐ์ ์์ ์ง์๋์ง๋ง, import & export๋ ์์ง ๋ณด์กฐ ๋๊ตฌ๊ฐ ํ์ํฉ๋๋ค. ์ด ์ ์ ์ฃผ์ํด์ผ ํฉ๋๋ค.
๐ Webpack
์ต์ ํ๋ก ํธ์๋ ํ๋ ์์ํฌ์์ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋๋ ๋ชจ๋ ๋ฒ๋ค๋ฌ(Module Bundler)์ ๋๋ค. ํ๋์ ์น ์๋น์ค๋ฅผ ๊ตฌ์ฑํ๋ ํ์ผ๋ค์ ํด์ํ ๋ค์ ํ๋์ ํ์ผ๋ก ํฉ์ณ์ฃผ๋ ์ญํ ์ ํฉ๋๋ค. ์นํฉ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ง ๊ด๊ณ๋์ด ์๋ค๊ณ ์๊ฐํ๋ฉด ์ ๋ฉ๋๋ค. ์น์์ ์ฌ์ฉํ๋ ๋ชจ๋ ์์์ ๋ํด ์ํฅ์ ๋ฏธ์น ์ ์๋ ๊ฐ๋ ฅํ ๋๊ตฌ์ ๋๋ค.
โจ '์ฉ์ด' ํท๊ฐ๋ฆฌ์ง ๋ง์
๋ชจ๋์ด๋?
ํน์ ๊ธฐ๋ฅ์ ๊ฐ๋ ์์ ์ฝ๋ ๋จ์๋ฅผ ์๋ฏธํฉ๋๋ค.
๋ชจ๋ ๋ฒ๋ค๋ง์ด๋?
์ฌ๋ฌ ์์๋ค์ ํ๋์ ํ์ผ๋ก ๋ณํฉ ๋ฐ ์์ถ ํด์ฃผ๋ '๋์'์ ๋ชจ๋ ๋ฒ๋ค๋ง์ด๋ผ๊ณ ํฉ๋๋ค.
๋ชจ๋ ๋ฒ๋ค๋ฌ๋?
์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ฑํ๋ ์์(HTML, CSS, JS ๋ฑ)์ ๊ฐ๊ฐ์ ๋ชจ๋๋ก ๋ณด๊ณ ์ด๋ฅผ ์กฐํฉํด์ ํ๋์ ๊ฒฐ๊ณผ๋ฌผ์ ๋ง๋๋ '์ฃผ์ฒด'์ ๋๋ค.
โจ ๋ฌด์์ ํด๊ฒฐํ๋ ค๊ณ ํ์๊น?
1. ํ์ผ ๋จ์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋ ๊ด๋ฆฌ ํ์์ฑ
์๋ฐ ์คํฌ๋ฆฝํธ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ์ญ ๋ฒ์๋ฅผ ๊ฐ์ง๋๋ค. ์ด๋์๋ ์ ๊ทผ์ด ๊ฐ๋ฅํ๋ค๋ ์๋ฏธ์ ๋๋ค. ์ด๋ฌํ ๋ถ๋ถ์์ ์ฅ์ ๋ ์์ง๋ง, ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ์ธ ๊ฒฝ์ฐ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์๋ฉด ๊ฐ์ ์ด๋ฆ์ ๋ณ์๊ฐ ์๋์น ์์ ๊ฐ์ ํ ๋นํ ์ ์์ต๋๋ค. ์ด๋ก ์ธํด ํฐ ๋ฒ๊ทธ๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ๋ฐ๋ผ์ ํ์ผ ๋จ์๋ก ๋ชจ๋ํ๊ฐ ํ์ํฉ๋๋ค. ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด AMD, Common.js์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๋ฑ์ฅํ๊ณ , ์นํฉ์ ์ด ๋ ๊ฐ์ง ๋ชจ๋ ์ง์ํฉ๋๋ค.
2. ์น ๊ฐ๋ฐ ์์ ์๋ํ ๋๊ตฌ
์น ์๋น์ค๋ฅผ ๊ฐ๋ฐํ๊ณ ๋ฐฐํฌํ ๋ ์๋์ ๊ฐ์ ์์ ์ ๋งค๋ฒ ํด์ผ ํ์ต๋๋ค.
- HTML, CSS, JS ์์ถ
- ์ด๋ฏธ์ง ์์ถ
- CSS ์ ์ฒ๋ฆฌ๊ธฐ ๋ณํ
์ด๋ฅผ ์๋ํํ๊ธฐ ์ํด Grunt, Gulp ๊ฐ์ ๋๊ตฌ๋ค์ด ๋ฑ์ฅํ์ต๋๋ค. ์นํฉ์ ์ด๋ฐ ๋๊ตฌ๋ฅผ ํฌํจํ๊ณ , ๋ ๋ง์ ์์ ์ ์ํํ ์ ์์ต๋๋ค.
3. ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋น ๋ฅธ ๋ก๋ฉ ์๋์ ๋์ ์ฑ๋ฅ
์น ์ฌ์ดํธ ๋ก๋ฉ ์๋์ ๋ฐ๋ผ์ ์ฌ์ฉ์ ์ดํ๊น์ง ๋ฐ์ํ ์ ์์ต๋๋ค. ์ด๋ฅผ ๊ฐ์ ํ๊ธฐ ์ํ ๋ํ์ ์ธ ๋ฐฉ๋ฒ์ ํ์ผ์ ์๋ฒ๋ก ์์ฒญํ๋ ํ์๋ฅผ ์ค์ด๋ ๊ฒ์ ๋๋ค. ๊ทธ๋์ ์ง์ฐ ๋ก๋ฉ(Lazy Loading)์ด ๋ฑ์ฅํ์ต๋๋ค. ์นํฉ์ ์ด๋ฅผ ์ฑ์ฉํ์ฌ ํ์ผ์ด ํ์ํ ๋ ์์ฒญํฉ๋๋ค. ์ฆ, ๋ฏธ๋ฆฌ ๋ก๋ฉํ์ง ์๊ณ ํ์ํ ๋๋ง๋ค ์์ฒญํ๊ธฐ ๋๋ฌธ์ ์ด๊ธฐ ๋ก๋ฉ ์๋๋ฅผ ํฅ์์ํฌ ์ ์์ต๋๋ค.
โจ ์นํฉ ๋ช ๋ น์ด ๊ฐ์ํํ๊ธฐ
webpack.config.js ํ์ผ์ ๋งค๋ฒ ๋ช ๋ น์ด๋ก entry, output ๋ฑ ์ฌ๋ฌ ์ต์ ์ ์ฌ์ฉํ์ง ์๊ณ , ํด๋น ํ์ผ์์ ๊ธฐ๋ณธ ์ค์ ์ ํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ฉด ์๋์ ๊ฐ์ด ๊ธฐ์กด ๋ช ๋ น์ด๋ฅผ ๊ฐ์ํํ ์ ์์ต๋๋ค.
//package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode=none --entry=src/index.js --output=public/output.js"
},
//webpack.config.js
module.exports = {
mode: 'none',
entry: './src/index.js',
output: './public/output.js'
};
//package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
โจ ์นํฉ ์ ์ฉํ๊ธฐ ์ ๊ณผ ํ๋ก '๋คํธ์ํฌ ์์ฒญ ํ์' ๋น๊ตํ๊ธฐ
ํฌ๋กฌ ๊ฐ๋ฐ์ ๋ชจ๋์ '๋คํธ์ํฌ'๋ฅผ ํตํด ์ด๋ค ๋ณํ๊ฐ ์๋์ง ํ์ธ ๊ฐ๋ฅํฉ๋๋ค. ๊ฐ์ฅ ํฐ ๋ณํ๋ '๋คํธ์ํฌ ์์ฒญ ํ์' ์ ๋๋ค. ์นํฉ์ ์ฌ๋ฌ ์์์ ํ๋์ ํ์ผ๋ก ํฉ์นฉ๋๋ค. ์ฆ, ์ฌ๋ฌ ์์์ ๋ฌถ์ ํ์ผ๋ง ์์ฒญํ๊ธฐ ๋๋ฌธ์ ๋คํธ์ํฌ ์์ฒญ ํ์๋ฅผ ์ค์ผ ์ ์์ต๋๋ค.
๋ง์ฝ์ ์ง๊ตฌ ๋ฐ๋ํธ์ ์๋ ๊ณณ์์ ์์ฒญํ๋ค๋ฉด ์ด๋ป๊ฒ ๋ ๊น์? ๋คํธ์ํฌ ์ํฉ์ด ์ข์ง ์์ ๊ฒฝ์ฐ ์ง์ฐ ์๊ฐ์ด ๋ฐ์ํ๊ฒ ๋ฉ๋๋ค. N๊ฐ์ ์์์ ์์ฒญํ์ ๋, ์ง์ฐ์๊ฐ์ ์ํด ์๊ฐ์ด ๋ ๊ฑธ๋ฆฌ๊ฒ ๋ฉ๋๋ค. ๋ฐ๋ผ์ ๋คํธ์ํฌ ์์ฒญ ํ์๋ฅผ ์ค์ด๋ ๊ฒ์ ์ค์ํฉ๋๋ค. ์ฐธ๊ณ ๋ก ๋ธ๋ผ์ฐ์ ๋ณ๋ก HTTP ์์ฒญ ํ์๋ ์ ์ฝ๋์ด ์๊ธฐ ๋๋ฌธ์ ์ด์ ๋ํ ์ต์ ํ๋ ๊ผญ ํ์ํฉ๋๋ค.
โจ ์นํฉ3์์ 4๋ก ๋ฌ๋ผ์ง ์ ์ ๋ฌด์์ผ๊น?
mode
์นํฉ 4๋ถํฐ ๋ชจ๋(mode)๋ผ๋ ๊ฐ๋ ์ด ์ถ๊ฐ๋์์ต๋๋ค. ๋ชจ๋๋ ์๋ 3๊ฐ์ง๊ฐ ์์ต๋๋ค.
- none: ์ค์ ์ ํจ
- development: ๊ฐ๋ฐ ๋ชจ๋
- production: ๋ฐฐํฌ ๋ชจ๋
๊ฐ ์คํ ๋ชจ๋์ ๋ฐ๋ผ ๊ฒฐ๊ณผ๋ฌผ๋ ๋ฌ๋ผ์ง๋๋ฐ ๊ทธ์ ๋ง๊ฒ ์นํฉ์์ ์ต์ ํํ๊ธฐ ๋๋ฌธ์ ๋๋ค. ์ฐธ๊ณ ๋ก ๊ธฐ๋ณธ ๊ฐ์ production ๋ชจ๋๋ก ์ค์ ๋์ด ์์ต๋๋ค.
ETC
- ๋น๋ ์๋๊ฐ ๋นจ๋ผ์ก์ต๋๋ค.
- CommonsChunkPlugin์ด deprecated ๋๊ณ , SplitChunksPlugin์ผ๋ก ๋์ฒด๋์์ต๋๋ค.
- ๊ทธ ์ธ์ deprecated ๋ ํ๋ฌ๊ทธ์ธ์ ๊ณต์ ๋ฌธ์๋ฅผ ์ฐธ๊ณ ํ๋ฉด ๋ฉ๋๋ค.
To v4 from v3 | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
webpack.js.org
โจ ์นํฉ ์ฃผ์ ์์ฑ 4๊ฐ์ง
entry
์นํฉ์์ ์์์ ๋ณํํ๊ธฐ ์ํด ํ์ํ ์ต์ด ์ง์ ์ ์ ๋๋ค. (์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ ๊ฒฝ๋ก) ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๋ฐ์ ์ธ ๊ตฌ์กฐ์ ๋ด์ฉ์ด ๋ด๊ฒจ ์์ด์ผ ํฉ๋๋ค. ๋ฐ๋ผ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋์์ํฌ ์ ์๋ ๋ด์ฉ๋ค์ด ๋ด๊ฒจ์ ธ ์์ด์ผ ํฉ๋๋ค. ์ฐธ๊ณ ๋ก ์ฑ๊ธ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ ์ ์ผ๋ฐ์ ์ผ๋ก ์ํธ๋ฆฌ ํฌ์ธํธ๊ฐ ํ๋์ด์ง๋ง, ๋ฉํฐ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ ์ธ ๊ฒฝ์ฐ ์ํธ๋ฆฌ ํฌ์ธํธ๊ฐ ์ฌ๋ฌ ๊ฐ๊ฐ ๋ ์ ์์ต๋๋ค.
output
์นํฉ์ ๋๋ฆฌ๊ณ ๋ ๊ฒฐ๊ณผ๋ฌผ์ ํ์ผ ๊ฒฝ๋ก๋ฅผ ์๋ฏธํฉ๋๋ค. ์ฐธ๊ณ ๋ก ๊ฐ์ฒด ํํ๋ก ์ต์ ์ ์ถ๊ฐํฉ๋๋ค.
- filename : ์นํฉ์ผ๋ก ๋น๋ํ ํ์ผ ์ด๋ฆ์ ์๋ฏธํฉ๋๋ค. ํด๋น ์์ฑ์ ์ต์
์ ์์๋ ์๋์ ๊ฐ์ต๋๋ค.
- '[name].bundle.js' : ํ์ผ ์ด๋ฆ์ entry ์์ฑ์ ํฌํจํ๋ ์ต์
- '[id].bundle.js' : ํ์ผ ์ด๋ฆ์ ์นํฉ ๋ด๋ถ์ ์ผ๋ก ์ฌ์ฉํ๋ ๋ชจ๋ ID๋ฅผ ํฌํจํ๋ ์ต์
- '[name].[hash].bundle.js' : ๋น๋๋ง๋ค ๊ณ ์ ํด์ ๊ฐ์ ๋ถ์ด๋ ์ต์
- '[chunkhash].bundle.js' : ๊ฐ ๋ชจ๋ ๋ด์ฉ์ ๊ธฐ์ค์ผ๋ก ์์ฑ๋ ํด์ ๊ฐ์ ๋ถ์ด๋ ์ต์
- path : ํด๋น ํ์ผ์ ๊ฒฝ๋ก๋ฅผ ์๋ฏธํฉ๋๋ค.
//webpack.config.js
var path = require('path');
module.exports = {
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist') // './dist/bundle.js'์ ๋์ผํฉ๋๋ค.
}
}
loader
์น ์ ํ๋ฆฌ์ผ์ด์ ์ ํด์ํ ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ด ์๋ ์น ์์๋ค์ ๋ณํํ ์ ์๋๋ก ๋์์ฃผ๋ ์์ฑ์ ๋๋ค. (HTML, CSS, ์ด๋ฏธ์ง, ํฐํธ ๋ฑ) ํด๋น ์์ฑ์ module์ด๋ผ๋ ์ด๋ฆ์ ์ฌ์ฉํฉ๋๋ค. ์ค์ ๋ก ์ ์ฉํด๋ณด๋ฉด css ํ์ผ์ ์๋ ์ฝ๋๋ค์ด ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ๋ก ๋ค์ด๊ฐ๊ฒ ๋ฉ๋๋ค.
์๋ ์ฝ๋๋ฅผ ํด์ํด๋ณด๋ฉด ์๋์ ๊ฐ์ต๋๋ค.
"๋ชจ๋ css ํ์ผ์ style-loader๋ถํฐ ์์ํด์ css-loader๊น์ง ์ ์ฉํ๊ฒ ์ต๋๋ค."
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
}
]
},
loader๋ฅผ ์ ์ฉํ์ง ์์ผ๋ฉด ์๋ฌ๊ฐ ๋ฐ์ํ๋๋ฐ ์ ๊ทธ๋ด๊น์? CSS ํ์ผ์ ์นํฉ์ ์ ์ฉํ๋ค๊ณ ๊ฐ์ ํด๋ณด๊ฒ ์ต๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ ์์ CSS๋ฅผ ๋ฃ์ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ loader๋ฅผ ์ฌ์ฉํ๋ฉด CSS ํ์ผ์ ํด์ํ๊ณ , ์๋ฐ์คํฌ๋ฆฝํธ ์์ ๋ฃ์ ์ ์์ต๋๋ค.
์ฐธ๊ณ ๋ก ๋ก๋์ ์์๋ ์ค์ํฉ๋๋ค. ์๋ก ๋ค์๋ฉด style-loader์ css-loader์ ์์๋ฅผ ๋ฐ๊พผ๋ค๋ฉด ์๋ฌ๊ฐ ๋ฐ์ํฉ๋๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ ์์๋ก ์งํ๋ฉ๋๋ค. ์ด ์ ์ ๊ผญ ์ ์ํด์ผ ํฉ๋๋ค.
- css-loader : CSS๊ฐ ์นํฉ์ผ๋ก ๋ค์ด๊ฐ ์ ์๊ฒ ๋์์ฃผ๋ ์ญํ ์ ํฉ๋๋ค.
- style-loader : ์นํฉ ์์ ๋ค์ด๊ฐ ์๋ ์คํ์ผ์ ํค๋ ์์ ๋ฃ์ด์ฃผ๋ ์ญํ ์ ํฉ๋๋ค.
๋ก๋ ์ข ๋ฅ๊ฐ ๋ง๊ธฐ ๋๋ฌธ์ ์ข ๋ ์์๋ณด๊ณ ์ถ์ผ์๋ค๋ฉด ์๋ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ์๊ธธ ๋ฐ๋๋๋ค.
Loaders | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
webpack.js.org
plugin
์ถ๊ฐ์ ์ธ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ์์ฑ์ ๋๋ค. ํ๋ฌ๊ทธ์ธ์ ํด๋น ๊ฒฐ๊ณผ๋ฌผ์ ํํ๋ฅผ ๋ฐ๊พธ๋ ์ญํ ์ ํ๋ค๊ณ ๋ณด๋ฉด ๋ฉ๋๋ค. ๋ฐฐ์ด์ ์ฌ์ฉํ๋ฉฐ ๊ฐ ์์๋ค์ ์๋์ ๊ฐ์ด ๊ฐ์ฒด ์ธ์คํด์ค๋ง ์ถ๊ฐํ ์ ์์ต๋๋ค.
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin(),
new webpack.ProgressPlugin()
]
}
ํ๋ฌ๊ทธ์ธ ์ข ๋ฅ๊ฐ ๋ง๊ธฐ ๋๋ฌธ์ ์ข ๋ ์์๋ณด๊ณ ์ถ์ผ์๋ค๋ฉด ์๋ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ์๊ธธ ๋ฐ๋๋๋ค.
Plugins | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
webpack.js.org
์์ฝ
- Entry : ์นํฉ์ ์คํํ ๋์ ํ์ผ ํน์ ์ง์ ์ ์ ๋๋ค.
- Output : ์นํฉ์ ๊ฒฐ๊ณผ๋ฌผ์ ๋ํ ์ ๋ณด๋ฅผ ์ ๋ ฅํ๋ ์์ฑ, ์ผ๋ฐ์ ์ผ๋ก filename, path๋ฅผ ์ ์ํฉ๋๋ค.
- Loader : CSS, ์ด๋ฏธ์ง์ ๊ฐ์ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์๋ ํ์ผ์ ์นํฉ์ด ์ธ์ํ๋๋ก ๋์์ฃผ๋ ์์ฑ์ ๋๋ค. (์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ ์์ผ๋ก ์ ์ฉ๋ฉ๋๋ค)
- Plugin : ์นํฉ์ผ๋ก ๋ณํํ ํ์ผ์ ์ถ๊ฐ์ ์ธ ๊ธฐ๋ฅ์ ๋ํ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ ์์ฑ์ ๋๋ค.
โจ Webpack Dev Server
๊ฐ๋ฐํ๋ ๊ณผ์ ์์ ์ฐ์ด๋ ๋๊ตฌ์ ๋๋ค. ์นํฉ์ ๋น๋ ๋์ ํ์ผ์ด ๋ณ๊ฒฝ๋์์ ๋, ์นํฉ์ผ๋ก ๋น๋ํ ํ ๋ธ๋ผ์ฐ์ ๋ฅผ ์๋ก๊ณ ์นจ ํด์ค๋๋ค. ์ด๋ก ์ธํด ๊ฐ๋ฐ ์์ฐ์ฑ์ ํฅ์ํ ์ ์์ต๋๋ค.
์นํฉ ๋ฐ๋ธ ์๋ฒ๋ฅผ ์คํํ๋ฉด ๋น๋ํ ๊ฒฐ๊ณผ๋ฌผ์ด ๋ณด์ด์ง ์์ต๋๋ค. ์ ๊ทธ๋ด๊น์? ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅ๋๊ธฐ ๋๋ฌธ์ ๋๋ค. ํ์ผ ์ ์ถ๋ ฅ๋ณด๋ค ๋ฉ๋ชจ๋ฆฌ ์ ์ถ๋ ฅ์ด ๋ ๋น ๋ฅด๊ณ , ์ปดํจํฐ ์์์ด ๋ ์๋ชจ๋ ์ ์์ต๋๋ค. ๋ฐ๋ผ์ ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ์ ๋คํธ์ํฌ๋ฅผ ๋ณด๋ฉด bundle.js ํ์ผ์ ์์ฒญํ๊ณ ์์ง๋ง, ๋์ผ๋ก ํ์ธํ ์ ์๋ ๊ฒ์ด ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅ๋๊ธฐ ๋๋ฌธ์ ๋๋ค.
๐ ์ฐธ๊ณ ์๋ฃ
webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
webpack.js.org
To v4 from v3 | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
webpack.js.org
ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ฅผ ์ํ ์นํฉ - ์ธํ๋ฐ | ๊ฐ์
1000๋ช ์ด ์ ํํ ์นํฉ ๊ฐ์. ์๋กญ๊ฒ ๋์จ ์นํฉ ๋ฒ์ ์ ๋ง์ถฐ ๋ฆฌ๋ด์ผ๋ ๊ฐ์ข์ ๋๋ค. ์ค์ต ์ค์ฌ์ผ๋ก ๋ ์ฝ๊ฒ ์นํฉ์ ๋ฐฐ์๋ณด์ธ์ :), ์ฝ 1000๋ช ์ด ์ ํํ ์ฝ๊ฒ ๋ฐฐ์ฐ๋ ์นํฉ์ ๋ฆฌ๋ด์ผ ๊ฐ์ข์ ๋๋ค. ๋ ์ฝ
www.inflearn.com
์นํฉ ํธ๋๋ถ
joshua1988.github.io
Modules | Vue.js + ES6
Import & Export ์ํฌํธ(Import)์ ์ต์คํฌํธ(Export)๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ฝ๋๋ฅผ ๋ชจ๋ํ ํ ์ ์๋ ๊ธฐ๋ฅ์ ๋๋ค. ์ฌ๊ธฐ์ ๋ชจ๋ํ๋ ์ฝ๊ฒ ๋งํด์ ๋ค๋ฅธ ํ์ผ์ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ธฐ๋ฅ์ ํน์ ํ์ผ์์ ์ฌ
joshua1988.github.io
'Web' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
ํ๋ก ํธ์๋ ๋น๋ ์์คํ ์ ๋ํด์ ์์๋ณด์! (feat. Webpack) (0) | 2021.09.19 |
---|---|
๐คท๐ป ์ฌ๋ฌ ์๋ฒ์์ ์ธ์ ์ ์ด๋ป๊ฒ ์ฒ๋ฆฌํ ๊น? (1) | 2020.03.31 |