Blog

Webpack

Webpack

๋ณ„๋„๋กœ ๋ถ„๋ฆฌ๋˜์–ด์žˆ๋Š” JavaScript ๋ชจ๋“ˆ๋“ค์˜ ์˜์กด์„ฑ์„ ๊ฒ€์‚ฌํ•˜๊ณ  N๊ฐœ์˜ ํŒŒ์ผ๋กœ ๋ฌถ๋Š”๋‹ค. ์ด๋ฅผ ๋ฒˆ๋“ค๋ง์ด๋ผ๊ณ  ํ•˜๋ฉฐ, Webpack์€ ๊ฐ€์žฅ ๋งŽ์ด ์“ฐ์ด๋Š” ๋ฒˆ๋“ค๋Ÿฌ ์ค‘ ํ•˜๋‚˜์ด๋‹ค.
๋‹ค๋ฅธ ๋ฒˆ๋“ค๋Ÿฌ๋กœ๋Š” browserify, roullup.js ๋“ฑ์ด ์žˆ๋‹ค.

์„ค์น˜

$ npm install webpack --save-dev
Plain Text
๋ณต์‚ฌ

์‚ฌ์šฉ

// hello.js module.exports = 'Hello' // world.js module.exports = 'World' // entry.js const hello = require('./hello') const world = require('./world') console.log(hello + world)
JavaScript
๋ณต์‚ฌ
$ webpack entry.js bundle.js Hash: 9e568770bce462c4b398 Version: webpack 2.4.1 Time: 79ms Asset Size Chunks Chunk Names bundle.js 2.92 kB 0 [emitted] main [0] ./hello.js 25 bytes {0} [built] [1] ./world.js 25 bytes {0} [built] [2] ./entry.js 93 bytes {0} [built] $ node bundle.js >> Helloworld
Shell
๋ณต์‚ฌ

์„ค์ •

command line์œผ๋กœ webpack์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ์˜ต์…˜๊ณผ ์„ค์ •๋“ค์ด ๋‹ค์–‘ํ•ด์ง€๋ฉด ๋ช…๋ น์–ด๊ฐ€ ๋ณต์žกํ•ด์ง€๊ณ  ํ•œ๊ณ„๊ฐ€ ์ƒ๊ธฐ๋ฏ€๋กœ ์„ค์ • ํŒŒ์ผ์„ ๋ถ„๋ฆฌํ•ด์„œ ์‚ฌ์šฉํ•œ๋‹ค.
// webpack.config.js module.exports = { entry: { 'entry': './entry.js' }, output: { filename: 'bundle.js' } } // package.json { "dependencies": {}, "devDependencies": { "webpack": "^2.4.1" }, "scripts": { "build": "webpack entry.js bundle.js" } }
JavaScript
๋ณต์‚ฌ
$ npm run build Hash: 048e62e002d64d39acb9 Version: webpack 2.4.1 Time: 70ms Asset Size Chunks Chunk Names bundle.js 2.92 kB 0 [emitted] entry [0] ./hello.js 25 bytes {0} [built] [1] ./world.js 25 bytes {0} [built] [2] ./entry.js 93 bytes {0} [built]
Shell
๋ณต์‚ฌ
์œ„์˜ ์˜ˆ์ œ๋Š” ์•„์ฃผ ๊ธฐ๋ณธ์ ์ธ ๋ฐฉ๋ฒ•์ด๋‹ค.
์ด ์™ธ์—๋„ babel transpiler, eslint, css-loader, file-loader ๋“ฑ ๋‹ค์–‘ํ•œ ์„ค์ •์„ ํ†ตํ•˜์—ฌ ๋ฉ‹์ง€๊ณ  ์•„๋ฆ„๋‹ต๊ฒŒ(?) ๋ฒˆ๋“ค๋ง์„ ํ•  ์ˆ˜ ์žˆ๋‹ค.

์ฐธ๊ณ 

โ€ข
http://d2.naver.com/helloworld/0239818
โ€ข
https://webpack.js.org/