1탄 - [ Node.js / Webpack ] 이번엔 웹팩 🤜
참고 문서 - https://webpack.js.org/guides/asset-management/
저번주에 이어 두번째 섹션을 진행해보려한다.
공부하기 싫은데 남자친구한테 끌려 왔다.
두번째는 자산 관리라고 표현되어 있다.
저번엔 javascript만 관리를 했다면 이번엔 이미지와 css와 같은 파일들도 관리를 해보자는 의미인 듯 하다.
저번에 작성했던 index.html 을 다음과 같이 변경한 후 시작해보자.
<!doctype html>
<html>
<head>
<title>Access Management</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
main.js가 아닌 bundle.js를 불러온다고 해놨으니
webpack의 설정도 main.js가 아닌 bundle.js를 생성하도록 변경해주어야 할 것이다. ( webpack.config.js )
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
🧡 CSS 관리
우리는 자바스크립트에 이어 친근한 css파일을 웹팩을 통해 관리하는 연습을 해보려한다.
위에서 설명한 것 처럼 웹팩은 모든 파일을 관리 할 수 있다고 했지만,
정작 웹팩 친구는 자바스크립트 밖에 모른다구 한다. 😕 ?
따라서 우린 css를 관리하기 위해 style-loader와 css-loader을 사용해서 css를 javascript로 변환하여 관리 해줄 것이다.
로더라는게
npm install --save-dev style-loader css-loader
--save-dev : 설치후 package.json정보도 업데이트
해당 모듈을 설치해 주었다면 webpack 설정에 추가
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
},],
},
};
설정을 저장해주었다면 /src에 style.css을 만들어 준 후 index.js에 css파일을 불러와 빌드해주겠다.
style에는 .hello{ color: red; } 로 스타일을 줬다.
// load lodash
import _ from 'lodash';
import './style.css';
function component() {
const element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add("hello"); // 해당 태그에 hello 클래스 추가
return element;
}
document.body.appendChild(component());
결과적으로 index.html을 열어보면 Hello webpack이 빨간색으로 표시 되는 걸 확인 할 수 있다!
💚 이미지 관리
CSS관리에 이어 우린 이미지도 관리 할 수 있어야 한다!
CSS는 style-loader와 css-loader 로더를 사용했다면 이미지는 file-loader를 사용해줄 것이다.
npm install --save-dev file-loader
그리고 css 로더를 설정해준 것 처럼 웹팩에 동일하게 설정해준다.
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
],
},
],
},
};
테스트를 위해 /src에 my-image.png파일을 넣어주었다.
// load lodash
import _ from 'lodash';
import './style.css';
import Icon from './icon.png';
function component() {
const element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add("hello"); // 해당 태그에 hello 클래스 추가
// Add the image to our existing div.
const myIcon = new Image();
myIcon.src = Icon;
element.appendChild(myIcon);
return element;
}
document.body.appendChild(component());이러면 이미지 로드도 완료..!
이어서 폰트와 데이터 관리 방법도 있는데 로더만 다르고 방법은 동일하기에 따로 정리하진 않겠다.
문서를 참조해서 같은 방법으로 따라하면 된다 :)
근데 나는 여기서 궁금점이....
내가 이미지, css와 같은 다른 자산들을 추가 삭제 할때마다
웹팩 entry에 설정해준 javascript파일에 추가 삭제를 해주어야 한다는건가?
그럼 내가 html에서 css와 javascript파일을 포함하는거랑 뭐가 다른거지 하는 의문이 생긴다.
그래서 다음장을 살짝 살펴보니 수동으로 다룬부분들을 자동으로 하도록 설정해주도록 알려주는 것 같다 :)
다음장을 이어서 하기 위해 오늘 한 부분들은 다시 삭제해놓자.
추가적으로 로더에 대해 조금 더 알아 봤다.
다들 이미지와 파일들을 불러오기 위해서 사용한다고만 설명해놔서...
로더는 위에서 설명했듯이 자산들을 자바스크립트로 바꿔주는 역할을 한다.
그리고 파일부분이 조금 신기했었다.
index.html파일을 열때 개발자 모드에서 불러오는 리소스에 png파일이 있기에 좀 더 찾아보니
웹펙으로 빌드하면 output에 설정한 ‘dist’ 경로로 이미지 파일을 복사한다고 한다.
아래 복사한 파일을 아래의 사진을 보면 알 수 있듯이 파일명을 해쉬코드로 대체 한다.
icon.png라고 이름을 정해준걸 해쉬태그로 변환하여 보여주는게 file-loader의 역할인듯 하다.
file-loader의 참고 문서
And run webpack via your preferred method. This will emit file.png as a file in the output directory (with the specified naming convention, if options are specified to do so) and returns the public URI of the file.
진짜 끝!
'웹 프로그래밍 > 공부일지' 카테고리의 다른 글
| [ Node.js / Webpack ] 개발 환경 (0) | 2020.04.04 |
|---|---|
| [ HTML ] 비디오 태그 자동재생 관련 옵션 (0) | 2020.04.03 |
| [ Node.js / Webpack ] 이번엔 웹팩 🤜 (0) | 2020.03.14 |
| [ 원페이지 스크롤 + 일반 스크롤 ] 화나서 직접 만든 원페이지 스크롤 2탄 (0) | 2020.03.12 |
| [Node.js] 실시간 멀티 채팅 만들기 3탄 (브로드캐스팅) (2) | 2020.02.23 |