1.HTML 파일에 번들링 된 JS 파일 연결하기 😇
😵 만일 지원하지 않는 문법을 사용한 js파일과 연결한다면...
src > index.html
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Shout Lorem Ipsum</title> </head> <body> <main> <h1>Shout Lorem Ipsum Once</h1> <div id="app"></div> </main> <script src="index.js"></script> // require를 사용한 파일과 연결되어 있기 때문에 에러 </body> </html>
👉🏽 아무것도 뜨지 않고 아래 에러가 난다.
src/index.js에서 사용한require문법은 Node.js 문법으로, 브라우저에서는 지원하지 않기 때문.
💡 HTML 파일을 번들링 된 JS 파일과 연결시키기
index.html파일을dist디렉토리로 옮기고- 번들 파일(
app.bundle.js)과 연결시킨다.
dist > index.html
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Shout Lorem Ipsum Once</title> </head> <body> <main> <h1>Shout Lorem Ipsum Once</h1> <div id="app"></div> </main> <script src="app.bundle.js"></script> // 번들 파일 연결 </body> </html>
잠시 코드 수정...
- 웹 페이지에 뭔가 보여지게
src/index.js수정 (DOM 관련 코드 추가) index.js(entry) 또는 이와 연결된(의존성 있는) 코드가 수정된 경우에는 번들링을 다시 진행해야 한다. (npm run build)
src > index.js
const _ = require('./underbar.js'); const shout = (...sentences) => console.log(...sentences); const shoutToHTML = (...sentences) => { const app = document.querySelector('#app'); app.append(...sentences.map(sentence => { const shoutHere = document.createElement('div'); shoutHere.className = 'shout'; shoutHere.textContent = sentence; return shoutHere; })) return; }; const loremIpsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis egestas feugiat elit, ac tincidunt neque vestibulum at. Mauris a eros sit amet urna efficitur tempus." const shoutOnce = _.once(shout); const shoutToHTMLOnce = _.once(shoutToHTML); shoutOnce(loremIpsum); shoutOnce(loremIpsum); shoutOnce(loremIpsum); shoutOnce(loremIpsum); shoutToHTMLOnce(loremIpsum); shoutToHTMLOnce(loremIpsum); shoutToHTMLOnce(loremIpsum); shoutToHTMLOnce(loremIpsum);
2. 애플리케이션에 CSS 추가
일단 어떤 모양인지 보고가기
dist디렉토리에 CSS 파일 추가
(QQQ. 번들링된 코드에 적용되기 때문에 보여지는 것일까...?)
dist > style.css
* { box-sizing: border-box; border: 0; padding: 0; margin: 0; } main { display: flex; justify-content: center; align-items: center; flex-direction: column; } div.shout { padding: 12px; margin: 4px; border-radius: 8px; border: 0.5px solid gray; }
- HTML 파일에
style.css연결
(CSS가 번들링 안 된 채로 HTML에 직접 연결되는 것)
dist > index.html
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> // css 파일 연결 <title>Shout Lorem Ipsum Once</title> </head> <body> <main> <h1>Shout Lorem Ipsum Once</h1> <div id="app"></div> </main> <script src="app.bundle.js"></script> </body> </html>
실제 개발 과정에서처럼 CSS 작성하기
dist/style.css파일의 위치를src/style.css로 옮기고- 파일을
index.js에서 불러온다.
src > index.js
const _ = require('./underbar.js'); require('./style.css'); // css 파일 불러오기 const shout = (...sentences) => console.log(...sentences); const shoutToHTML = (...sentences) => { const app = document.querySelector('#app'); app.append(...sentences.map(sentence => { const shoutHere = document.createElement('div'); shoutHere.className = 'shout'; shoutHere.textContent = sentence; return shoutHere; })) return; }; const loremIpsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis egestas feugiat elit, ac tincidunt neque vestibulum at. Mauris a eros sit amet urna efficitur tempus." const shoutOnce = _.once(shout); const shoutToHTMLOnce = _.once(shoutToHTML); shoutOnce(loremIpsum); shoutOnce(loremIpsum); shoutOnce(loremIpsum); shoutOnce(loremIpsum); shoutToHTMLOnce(loremIpsum); shoutToHTMLOnce(loremIpsum); shoutToHTMLOnce(loremIpsum); shoutToHTMLOnce(loremIpsum);
👉🏽
node src/index.js로 Node.js에서 실행시키면
❌ Node.js는 그 자체만으로는 CSS를 읽을 수 없어 문법에러 발생
👉🏽
npm run build로 웹팩을 통해 번들링 하려고 하면
❌ 웹팩에 CSS 파일을 처리하기 위한 로더가 설정되어 있지 않기 때문에 에러 발생
loader가 필요하다는 에러 메시지You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
3. CSS 파일 처리에 필요한 Loader 추가
- 번들링 할 때 CSS 파일을 처리하기 위한 Loader 추가
css-loader: CSS를 JS파일 내에서 불러오는 로더
style-loader: 불러온 CSS를 style 요소 내에 적용하는 로더
참고 : 다양한 Styling 로더들...
🔥🔥🔥 Loader
- JavaScript, JSON이 아닌 파일을 불러와서 번들링 할 때 제대로 처리되도록 하는 역할
1) 로더 설치하기
npm i -D css-loader style-loader
2) webpack.config.js에 로더 설정 추가
webpack.config.js
const path = require("path"); module.exports = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), filename: "app.bundle.js", }, module: { rules: [ { // 파일명이 .css로 끝나는 모든 파일에 적용 test: /\.css$/, // 배열 마지막 요소부터 오른쪽에서 왼쪽 순으로 적용 // 먼저 css-loader가 적용되고, styled-loader가 적용되어야 한다. // 순서 주의! use: ["style-loader", "css-loader"], // loader가 node_modules 안의 있는 내용도 처리하기 때문에 // node_modules는 제외해야 합니다 exclude: /node_modules/, }, ], }, };
4. 번들링 다시 하기
npm run build로 번들링 다시 하기- CSS까지 잘 적용되어 번들링 됐는지 확인
5. 번들 파일에서 로더가 어떻게 작동하는지 확인
app.bundle.js파일에서alt+shift+F실행
(👉🏽 VS Code의 Format Document 기능. 코드가 읽기 편하게 변한다)
style요소를 자동 생성하고 지금까지 작성한 CSS를 넣는 방식
6. 브라우저에서 CSS 적용됐는지 확인
dist/index.html파일 실행- 이제
<link rel="stylesheet" href="style.css">코드는 필요 없으므로 지운다.
