웹팩 아카데미 #3: HTML

7554 단어 csswebdevjavascriptwebpack
이제 웹팩 지식에 대한 몇 가지 기본 사항이 있습니다!

게으른 문제



HTML 파일과 webpack 구성을 확인하면 뭔가 잘못된 것을 볼 수 있습니다. 그렇죠?

예를 들어 bundle.js 에서 output.js 로 출력 이름을 변경해야 할 때마다 HTML 파일에서 변경해야 합니다. 이전에 CSS 파일과 같은 다른 출력 파일을 추가하려는 경우에도 동일한 문제입니다!

이 문제를 해결하는 방법



플러그인을 사용하여 우리를 구할 것입니다HtmlWebpackPlugin!

출력 파일을 HTML에 직접 삽입합니다! hash 이름을 사용할 때 큰 도움이 될 것입니다(다음 웹팩 아카데미에서 확인하기 😇) !

따라서 HTML 파일에서 가져오기를 제거할 수 있습니다.

👇부터

<html>
    <head>
        <link rel="stylesheet" href="dist/styles.css">
    </head>
    <body>
        <h1 class="toto">My First Heading</h1>

        <p>My first paragraph.</p>
    </body>
    <script src="dist/bundle.js"></script>
</html>


이에 👇

<html>
    <head>
    </head>
    <body>
        <h1 class="toto">My First Heading</h1>

        <p>My first paragraph.</p>
    </body>
</html>


HTML은 컴파일에 사용될 것이기 때문에 /src에 HTML을 넣을 수 있습니다.

구성 플러그인을 살펴보겠습니다!

new HtmlWebpackPlugin({
   template: './src/index.html',
   inject: 'body',
   minify: {
      removeComments: true,
      collapseWhitespace: false
   },
})


HTML 파일의 경로를 지정하면 inject 옵션은 플러그인에 script output file를 넣을 위치를 나타냅니다!

이 옵션을 사용하지 않으면 bundle 파일을 <head>에 넣고 스크립트 파일을 로드한 후 html 본문을 로드하므로 문제가 될 수 있습니다! 일부 문제가 발생할 수 있습니다(예: 사용자가 애플리케이션에 들어올 때 페이지 로드)

minify 속성을 사용하여 주석을 제거하고 공백도 제거할 수 있습니다!

✅ 그리고 마침내 우리는 이것을 출력으로 얻었습니다 👇

<html>
    <head>
    <link href="style.css" rel="stylesheet"></head>
    <body>
        <h1 class="toto">My First Heading</h1>

        <p>My first paragraph.</p>
    <script defer="defer" src="bundle.js"></script></body>
</html>


다른 옵션!



플러그인에 대한 몇 가지 흥미로운 옵션을 빠르게 확인하겠습니다!

webpack config에서 metadata를 사용하고 HTML에서 사용할 수 있습니다. 예를 들어 페이지 제목에 title를 사용하고 CDN을 로드하려면 CDN 옵션을 사용할 수 있습니다(다음 아카데미에서 확인할 것입니다.
!).
title 메타데이터 사용 👇

new HtmlWebpackPlugin({
   title: 'Webpack academy title',
   template: './src/index.html',
   inject: 'body',
   minify: {
      removeComments: true,
      collapseWhitespace: false
   },
})


HTML에서 가져오세요 👇

<head>
   <title><%= htmlWebpackPlugin.options.title %></title>
</head>


출력 👇

<title> Webpack academy title </title>


타담! ✅

이 플러그인의 위력을 볼 수 있습니다! webpack config에 현재 컨텍스트가 있으므로 웹팩 구성에서 메타데이터를 사용하는 것이 HTML에 데이터를 넣는 것보다 더 효율적입니다. HTML은 컨텍스트를 가져오지 않고 템플릿만 사용해야 합니다!

결론



Webpack HTML 템플릿 플러그인은 매우 강력합니다!

출력 파일의 이름을 처리하지 않고 출력의 모든 주입을 수행할 수 있습니다!

우리는 또한 일부를 주입할 수 있습니다metadata! 제목 페이지 이름 좋아요

이 글에 사용된 코드를 확인하실 수 있습니다 👇

https://github.com/Code-Oz/webpack-academy/tree/ca917a089029d5fe509d3eb85b832f745443e4f0


이 글이 마음에 드셨으면 좋겠습니다!

🎁 저를 팔로우하고 MP하시면 제 새책Underrated skills in javascript, make the difference을 무료로 받으실 수 있습니다 😁

또는 그것을 얻으십시오 HERE

🎁 MY NEWSLETTER

☕️ 할 수 있어요 SUPPORT MY WORKS 🙏

🏃‍♂️ 👇 팔로우 하시면 됩니다.

🕊 트위터 :

👨‍💻 Github: https://github.com/Code-Oz

그리고 이 글을 🔖 마크할 수 있습니다!
Oh my Tomtit - Raku에서 작성된 oh my zsh의 대안
JavaScript의 함수 선언 VS 함수 표현식

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage