웹팩이란? What is Webpack?

웹팩(Webpack)이란?

모던 웹 개발에 있어서 Webpack은 매우 중요한 도구중에 하나로 자리 잡았습니다. 

웹팩은 우리의 코드를 변환시키는 역할을 합니다.

자세히 살펴보면 다음과 같은 4 가지 요소가 있습니다.

1. 첫번째는 entry. 이는 웹팩이 어디서부터 코드를 변환시키는지 알려줍니다.

Entry: Tells webpack where to start.

module.exports = {

entry: "./path/to/my/entry/file.js'

}

2. 두번째는 output. 변환이된 코드를 어디에 놓을지를 알려줍니니다. 변환이 끝난후에...

Output : Where to put the finished code.

const path = require('path');

module.exports = {

entry: "./path/to/my/entry/file.js',

output: {

path : path.resolve(__dirname, 'dist'),

filename : 'my-first-webpack.bundle.js'

}

};

3. 세번째 loader. 웹팩에게 각 파일을 어떻게 관리해야하는 지를 알려줍니다.

예를 들면 이미지 파일을 위한로더, SCSS 파일을 위한로더, 자바스크립트 파일을 위한 로더...

Loaders : Transform files.

const path = require('path');

module.exports = {

entry: './path/to/my/entry/file.js',

output: {

path : path.resolve(__dirname, 'dist'),

filename : 'my-first-webpack.bundle.js'

},

module: {

rules: [

{ test: /\/txt$/, use: 'raw-loader' }

]

}

};

module.exports = config;

만약 파일 포멧이 txt(텍스트 파일이라는 뜻) 이라면, 해당 로더를 쓸거라는 것!

4. 마지막 plugins, 전체코드를 변환시킨다. 각기 다른 파일들을 변환시킨 후에 플러그인은 끝난 파일들을 변환시킵니다.

Plugins : Transform the whole transformed code.

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

const webpack = require('webpack');

const path = require('path');

module.exports = {

entry: "./path/to/my/entry/file.js',

output: {

path : path.resolve(__dirname, 'dist'),

filename : 'my-first-webpack.bundle.js'

},

module: {

rules: [

{ test: /\/txt$/, use: 'raw-loader' } // reguler expression

]

},

plugins : [

new webpack.optimize.UglifyJsPlugin(),

new HtmlWebpackPlugin({ template: './src/index.html' })

]

};

module.exports = config;

로더는 한가지 종류의 파일만 변환시키고, 플러그인은 전체 코드를 변환시킵니다.

웹팩은 모든 파일들을 module 로 취급합니다.

Webpack treats every file(.css, .html, .scss, .jpg, etc) as a module.

웹팩은 자바스크립트만 이해합니다.

Webpack only understands Javascript.

웹팩은 여러개의 엔트리를 가질 수 있지만, 단 한개의 아웃풋만 가질 수 있습니다.

Webpack can have multiple entry points, but only one ouput.

{

entry : {

app: './src/app.js',

search: './src/search.js'

},

output: {

filename: '[name].js',

path: __dirname + '/dist'

}

}

// weites to disk : ./dist/app.js,