웹팩(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,