고정 헤더 영역
상세 컨텐츠
본문
*인프런의 프론트엔드 개발자를 위한 웹팩(캡틴판교)를 참고하였습니다.
1.WEBPACK이란?
웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다.
1-1)왜 WEBPACK을 사용하려 할까?
<body>
<!-- ... -->
<script src="./app.js"></script>
<script src="./main.js"></script>
</body>파일 안의 변수 등이 충돌할 수 있기 때문에
파일 단위로 변수를 관리하고 싶은 욕구를 충족하고자 WEBPACK이 등장하였다.
1-2)WEBPACK으로 해결하고자 하는 문제
- 자바스크립트 변수 유효 범위
- 브라우저별 HTTP 요청 숫자의 제약
- 사용하지 않는 코드의 관리
- Dynamic Loading & Lazy Loading 미지원
1-3)WEBPACK의 4가지 주요 속성
- entry
- output
- loader
- plugin
1-3-1) entry, ouput
--entry
entry 속성에 지정된 파일에는 웹 애플리케이션의 전반적인 구조와 내용이 담겨져 있어야 합니다.
웹팩이 해당 파일을 가지고 웹 애플리케이션에서 사용되는 모듈들의 연관 관계를
이해하고 분석하기 때문에 애플리케이션을 동작시킬 수 있는 내용들이 담겨져 있어야 합니다.
엔트리 포인트는 1개가 될 수도 있지만 아래와 같이 여러 개가 될 수도 있습니다.
--output
output 속성은 웹팩을 돌리고 난 결과물의 파일 경로를 의미합니다.
최소한 filename은 지정해줘야 하며 일반적으로 아래와 같이 path 속성을 함께 정의합니다.
여기서 filename 속성은 웹팩으로 빌드한 파일의 이름을 의미하고, path 속성은 해당 파일의 경로를 의미합니다.
그리고 path 속성에서 사용된 path.resolve() 코드는 인자로 넘어온 경로들을 조합하여
유효한 파일 경로를 만들어주는 Node.js API입니다.
1-3-2) loader
module.exports = {
module: {
rules: []
}
}로더(Loader)는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌
웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성입니다.
cssloader
module: {
rules: [
{
test: /\.css$/,
use: ['css-loader']
}
]
}로더 적용 순서
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: { modules: true }
},
{ loader: 'sass-loader' }
]
}
]
}1-3-3)Plugin
플러그인(plugin)은 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성입니다.
로더랑 비교하면 로더는 파일을 해석하고 변환하는 과정에 관여하는 반면,
플러그인은 해당 결과물의 형태를 바꾸는 역할을 한다고 보면 됩니다.
플러그인의 배열에는 생성자 함수로 생성한 객체 인스턴스만 추가될 수 있습니다.
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin(),
new webpack.ProgressPlugin()
]
}
2.dependencies와 devDependencies의 차이점
dependencies는 주로 화면의 로직, 애플리케이션 로직의 구현과 관련된 패키지가 설치된다.
devDependencies는 개발과 관련된 패키지가 설치된다.
3.scripts
3-1) mode
모드 설정을 제공하는 것은 웹팩이 built-in optimizations를 사용하도록 하는 것이다.
각 모드에 따라 빌드의 결과물이 달라진다.
development
Sets process.env.NODE_ENV on DefinePlugin to value development .
Enables NamedChunksPlugin and NamedModulesPlugin
production
Sets process.env.NODE_ENV on DefinePlugin to value production .
Enables FlagDependencyUsagePlugin , FlagIncludedChunksPlugin , ModuleConcatenationPlugin ,
NoEmitOnErrorsPlugin , OccurrenceOrderPlugin , SideEffectsFlagPlugin and TerserPlugin .
none
Opts out of any default optimization options
3-2) --entry, --output
"build": "webpack --mode=none --entry=src/index.js --output=public/output.js"--entry는 시작파일, --output은 빌드의 결과물을 담을 파일을 지정한다.
4.webpack.config.js
var path = require('path');
module.exports = {
mode: 'production',
entry: './js/app.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'main.bundle.js'
},
module: {
rules: [{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}]
},
stats: {
colors: true
},
devtool: 'source-map'
};package.json 파일을 아래와 같이 수정
"scripts": {
"build": "webpack"
}
5.WEBPACK 설정 전후 비교
개발자 도구의 network 탭을 비교해보았을 경우 request가 감소하고, 이로 인해 속도가 개선된다.
6.WEBPACK 결과 파일 해부
/******/ (function(modules) {
/******/ })
/************************************************************************/
/******/ ([
/******/ ]);WEBPACK의 결과 파일은 IIFE형식으로 되어 있어 외부로부터 보호되고 있다.
7.WEBPACK DEV SERVER
웹팩 데브 서버는 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구입니다.
웹팩의 빌드 대상 파일이 변경 되었을 때 매번 웹팩 명령어를 실행하지 않아도
코드만 변경하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해줍니다.
참고-https://joshua1988.github.io/webpack-guide/
웹팩 핸드북
joshua1988.github.io
'JavaScript Library' 카테고리의 다른 글
| React Refs (0) | 2020.08.10 |
|---|---|
| Babel (0) | 2020.08.09 |
| PATH (0) | 2020.08.07 |
| Lodash (0) | 2020.08.07 |
