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/




