웹팩을 간단히 구현해보자.
1. 프로젝트 폴더를 만든다.
2. 프로젝트 폴더에서 npm init -y로 package.json 파일을 만든다.
3. 웹팩을 설치한다.
npm install --save-dev webpack
npm install --save-dev webpack-cli
4. dist/index.html 파일을 생성하고 아래의 코드를 넣는다.
<!DOCTYPE html>
<html>
<head></head>
<body>
<script src="main.js"></script>
</body>
</html>
5. src/index.js 파일을 생성하고 아래의 코드를 넣는다.
import _ from 'lodash';
function component() {
const element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'world'], ' '); // lodash 사용
return element;
}
document.body.append(component());
6. npx webpack 명령어를 입력한다.
아무 설정도 안 했기 때문에 src/index.js를 entry point로 보고 dist/main.js 파일을 생성한다.
이제 index.html을 크롬으로 열면 생성된 lodash가 정상적으로 작동하면서 Hello world라는 문구가 나타난다.
그러나 실무에서는 이렇게 단순하게 사용하지 않고 복잡한 설정을 해야 하기 때문에
webpack.config.js라는 파일을 만들어 여러 설정을 한다.
7. webpack.config.js 파일을 생성하고 아래의 코드를 넣는다.
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
npx webpack을 다시 입력하면 똑같은 결과가 나온다.
config 파일의 main.js의 파일 이름을 바꾸면 결과가 달라지는 것을 볼 수 있다.
이상의 코드는 아래 링크를 참고하고
https://github.com/socratone/simple-webpack-basic
자세한 내용은 아래 링크를 참고하자.
'Bundler > Webpack' 카테고리의 다른 글
| 웹팩에서 CSS를 모듈처럼 쓰는 방법 - CSS module (0) | 2020.11.24 |
|---|---|
| 자바스크립트로 웹 개발을 하기 위한 웹팩 설정 방법 (0) | 2020.11.23 |
| 웹팩을 이용해서 리액트 프로젝트 만들기 (0) | 2020.09.19 |
