포스트의 코드입니다.
DogPawDev/webpack-example
webpack 공부입니다. Contribute to DogPawDev/webpack-example development by creating an account on GitHub.
github.com
어떻게 최종적인 결과를 원하는대로 만들 것인가 알아보는 시간입니다.
최종적인 파일의 이름, 하나로 뭉칠건지 특정 파일은 나눌 것인지를 설정 할 수 있습니다.
또 하나의 페이지를 만들어서 진행해 봅시다.
/about.html 파일을 만들고 다음과 같이 작성해 줍니다. About.html은 about_bundle.js를 참고하도록 합니다.
기존 index.html 파일도 <a> 태그를 추가해 서로 이동할 수 있도록 만들어 줍니다.
about.html
<html>
<body>
<h1>Hello, about</h1>
<div id="root"></div>
<script src="./public/index_bundle.js"></script>
<a href="./index.html">ㅁ</a>
</body>
</html>
index.html
<html>
<body>
<h1>Hello, index</h1>
<div id="root"></div>
<script src="./public/index_bundle.js"></script>
<a href="./about.html">ㅁ</a>
</body>
</html>
/source/about.js 파일도 생성해 줍니다.
import hello_word from "./hello.js";
import world_word from "./world.js";
import css from "./style.css";
document.querySelector('#root').innerHTML = world_word+' '+hello_word ;
console.log('css',css);
이제 about.html에서 about_bundle.js를 사용하기 위해 public 폴더에 만들어 줘야 합니다
그런데 엔트리 파일은 index.js 입니다.
이럴 때 어떻게 해야하나가 문제입니다.
해결 방법으로 여러 개의 아웃풋을 만드는 방법이 있습니다.
지금 index.js에서 사용하는 파일들을 번들링 하고 싶고 about.js에서 사용하는 파일들도 번들링을 하고 싶은 상황 입니다.
Entry를객체로 만들고 이름을 정합니다
이렇게 만들면 웹팩은 두개의 파일을 번들링 진행해줍니다.
하지만
,filename:'index_bundle.js'
이렇게 진행할 경우 하나의 파일로만 생성됩니다.
,filename:'[name]_bundle.js'
다음과 같이 진행할 경우 각각의 output 파일이 생기게 됩니다.
Output | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
v4.webpack.js.org
다음과 같이 filename 말고도 다양한 옵션으로 값은 넘겨줄 수 있습니다.
'김데브-프로그래밍 > Webpack' 카테고리의 다른 글
| --watch 옵션, npm 패키지 사용 (0) | 2020.06.10 |
|---|---|
| Webpack의 플러그인의 도입 (0) | 2020.06.10 |
| Webpack의 로더 (0) | 2020.06.10 |
| Webpack의 모드 (0) | 2020.06.10 |
| Webpack 사용 (0) | 2020.06.10 |
