그동안 webpack과 npm을 사용하긴 했지만
legacy code들을 계속 이어받아 조금씩만 수정하여 사용해왔었다.
기억이 조금 가물가물해졌기 때문에 다시한번 정리를 해보려 한다.
환경은 아래와 같이 하겠다.
html, js, webpack, npm modules(webpack, webpack-cli, lodash)
우선 html, js ,npm modules, webpack의 관계를 알아야한다.
-
npm: 다른 사람이 배포하는 module을 받아 사용할 수 있도록 하는 store
-
html은 받아들인 js 파일을 전부 global환경에서 실행하며 페이지 리로드시 js파일을 새로 로딩시키기 때문에
inline으로써는 한계점이 존재한다. -
webpack: js module 뿐 아니라 각종 확장자 파일을 묶어주고 하나의 또는 spliting된 bundle을 제공해 html에 넘겨주게 된다. (변수명 충돌과 SPA, optimization등 다양한 기능이 있음)
즉 npm module 사용을 위해선 webpack은 필수불가결한 존재이다.
아래 코드들은 서로 긴밀히 연결되어 있는 4개의 파일이다.
HTML
- html은 하나의 js파일을 받는다
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src='./dist/main.js'></script>
</body>
</html>JS
- lodash npm module을 받아 함수를 실행해 DOM을 조작한다.
import _ from 'lodash';
const hello = () => {
let element = document.createElement('div');
element.innerHTML = _.join(['hello', 'webpack', 'good', 'morning'], '~~');
return element;
};
document.body.appendChild(hello());package.json
- npm을 관리하고 cli 명령을 저장해 긴 타이핑을 막아준다.
- dependency관리와 module version 관리를 할 수 있다.
- npm i, npm i -D를 통해 dependencies npm module의 설치가 가능하다.
{
"name": "npmtesting",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"lodash": "^4.17.21"
},
"devDependencies": {
"webpack": "^5.37.1",
"webpack-cli": "^4.7.0"
}
}
wepack.config.js
- webpack 설정을 담아놓은 파일이다.
- package.json의 build 명령을 통해 webpack.config.js 파일의 내용을 읽고 webpack cli를 실행시킨다.
const path = require('path');
module.exports = {
name: 'npmTesting',
mode: 'development',
entry: './index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
이 블로그의 글은 제 생각을 정리한 글과 인터넷 어딘가에서 배운 것을 정리한 글입니다. 출처는 되도록 남기도록 하겠습니다. 수정 및 건의 오류 등이 있으면 언제든지 댓글 부탁드립니다.