모듈의 장점
- 유지보수 용이: 의존성을 줄여 개선과 수정이 편함
- 변수명 겹칠일 없음
- 재사용성: 같은 코드를 반복하지 않고, 필요할때마다 재사용 가능
모듈 시스템
- es module
<script type="module" />, export, import
- common js
node js 환경에서 js모듈을 사용하기 위해exports, module.exports, require
- amd
웹팩이란?
JavaScript 애플리케이션을 위한 정적 모듈 번들러
모든 모듈을 (js, style, html, image...) dependency를 고려해 bundling해서 (기존파일 병합, 압축),
최종적으로 웹페이지 올라가기 전에 하나의 최적화된 파일(번들)로 만들어주는 Node.js패키지
등장 배경
<script src="module1"></script>
<script src="module2"></script>
<script src="module3"></script>`JS는 파일베이스로 모듈화가 되지않아
전역변수충돌- 스크립트
로딩순서- 복잡도에 따른 관리상의 문제 발생
기존 모듈 로더들과의 차이점
기존의 Web Task Manager(gulp, grunt) +
모듈의존성 관리
모듈간의 관계를chunk단위로 나눠, 필요할때 로딩
특징
- 모든파일을
모듈로 본다, 모듈간의dependency graph를 가짐 => 모듈관리 수월- JS 모듈관리, 번들링가능
- JS만 읽는다 (로더필요)
장점
- 모든것을 한번에 로딩하지 않고,
필요할때만 로딩요청중복제거(에셋을 따로따로 여러번 요청해줄 필요X)- 사용하지 않는 코드는 제외하고 번들링
- 웹페이지
성능향상, 로드시간 절약
(예를 들면 http요청 갯수 줄이기,
공백등 리소스를 줄여 서버에 보낼파일 압축,
사용자 경험이 좋음 )
설치
npm i -D webpack // --save-dev, -D : package.json devDependencis에 개발 모듈추가설정 (webpack.config.js)
path : 파일, 폴더의 경로를 다루고 변경하는 Node.js 기본 모듈
const path = require('path');
module.exports={
entry : ['./src/index.js', './src/test.js']
output: {
filename : 'bundle.js',
path : path.resolve(__dirname + '/build')
},
mode : 'development'
}
// Plug-In : build된 bundle 파일을 동적으로 특정 html 페이지에 추가,
// build시 javascript, css, html 등의 파일 난독화, 압축 가능entry
번들링할 js 진입점
output
번들링된 파일결과 (filename은 파일이름, path은 저장경로)
loader
모듈을 해석, 변환 (웹팩은 js만 읽을수 있어서, JS외의 HTML,css, image, font등을 웹팩이 읽을수 있게 변환)
- style-loader
-css-loader: css ➡️js로 변경
-style-loader: js로 변경된 css를돔에 추가 - img, file loader
설치
npm i css-loader style-loader -D
npm i file-loader -D설정
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.png$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
}
],
},
};test는 로더를 적용할 파일형식
use는 처리할 로더이름 (배열로 설정하면 뒤에서 앞으로 순서대로 로더가 동작한다)
plugin
로더는 모듈을 해석, 변환하는데 반해,
플러그인은 결과물(번들텍스트)에 추가적인 처리를 할수 있음
html-webpack-pluginscript를 html에 자동으로 넣어줌clean-webpack-plugin기존에 남아있던 파일을 웹팩이 삭제해줌
설치
npm i html-webpack-plugin -D
npm i clean-webpack-plugin -D설정 (생성자 함수를 가져온다음, 배열에 생성한 인스턴스 추가만 하면 됌)
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin()
],
};정리
- entry로부터 의존성있는 모든 모듈을 찾는다
- loader를 통해 모든 모듈을 읽을수 있게 변환한다.
- 모듈들을 병합하고 압축해서 output에 결과물을 생성한다
- 결과물에 추가작업이 필요하면 plugin을 통해 처리한다.
_filename: 현재파일 경로
_dirname: 현재폴더 경로
__dirname은 노드에서 제공하는 현재 directory의 경로 변수
const path = require('path'); // node module중에 path모듈 가져옴
myPath = path.resolve('this', 'is/a', '.././', 'path', 'resolve');
console.log(myPath); // => /this/is/path/resolvepath.resolve : string형식의 인자들을 합쳐서, 운영체제에 맞게 최적화된 경로를 설정해줌.
join, resolve 차이점
join은 인자들을 모두 concat하지만, resolve는 인자들을 루트로 인식함
path.join('/a', '/b') // '/a/b'
path.resolve('/a', '/b') // '/b'
webpack --watch 변화가 있을시 자동 번들링
