html-webpack-plugin의 사용법은 무엇입니까?-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

html-webpack-plugin의 사용법은 무엇입니까?

亚连

Jun 11, 2018 am 11:55 AM

html plugin webpack

이 글은 주로 html-webpack-plugin 사용법에 대한 자세한 설명을 소개하고 있으니 참고하시기 바랍니다.

html-webpack-plugin 아마도 webpack을 사용해 본 사람이라면 누구나 이 플러그인을 사용해 본 적이 있을 것입니다. 웹팩을 배우다 보면 이런 코드를 자주 볼 수 있습니다.

// webpack.config.js
module.exports = {
  entry: path.resolve(__dirname, &#39;./app/index.js&#39;),
  output:{
    path: path.resolve(__dirname, &#39;./build&#39;),
    filename: &#39;bundle.js&#39;
  }
  ...
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

로그인 후 복사

터미널에서 webpack 명령을 입력하면

webpack

마법처럼 index.html 파일과 Bundle.js 파일이 빌드 폴더에 생성되고 webpack이 자동으로 인덱스에서 참조되는 것을 볼 수 있습니다. html 파일 생성된 Bundle.js 파일입니다.

이 모든 것은 html-webpack-plugin의 결과입니다. 자동으로 HTML 파일을 생성하고 관련 자산 파일(예: CSS, js)을 참조합니다.

프론트엔드 자동화 구축을 6월에 처음 접했습니다. 웹팩과 리액트를 배울 때 이 플러그인을 간략하게 사용했지만, 오늘은 공식 문서를 따라 몇 가지만 사용하겠습니다. 의 모든 용도를 살펴보세요.

title

이름에서 알 수 있듯이 생성된 html 파일의 제목을 설정합니다.

filename

말할 것도 없고, 생성된 html 파일의 파일명입니다. 기본값은 index.html입니다.

template

은 사용자가 지정한 템플릿 파일을 기반으로 특정 html 파일을 생성합니다. 여기서 템플릿 유형은 원하는 어떤 템플릿이든 될 수 있으며 html, jade, ejs, hbs 등이 될 수 있습니다. 그러나 사용자 정의 템플릿 파일을 사용할 때는 해당 로더를 미리 설치해야 하며, 그렇지 않으면 webpack을 설치해야 한다는 점에 유의해야 합니다. 올바르게 구문 분석이 작동하지 않습니다. 예를 들어 옥을 생각해보십시오.

npm install jade-loader --save-dev

로그인 후 복사

// webpack.config.js
...
loaders: {
  ...
  {
    test: /\.jade$/,
    loader: &#39;jade&#39;
  }
}
plugins: [
  new HtmlWebpackPlugin({
    ...
    jade: &#39;path/to/yourfile.jade&#39;
  })
]

로그인 후 복사

마지막으로 yourfile.html 및 Bundle.js 파일이 빌드 폴더에 생성됩니다. 이제 다시 돌아가서 이전에 사용한 title 속성을 살펴보겠습니다.

템플릿 옵션과 제목 옵션을 모두 지정하면 웹팩은 어떤 옵션을 선택하게 되나요? 실제로 템플릿 파일에 제목이 설정되어 있지 않더라도 이때 지정한 템플릿 파일의 제목이 선택됩니다.

파일 이름은 어떻게 되나요? 실제로는 지정된 파일 이름이 파일 이름으로 사용됩니다.

inject

주입 옵션. true, body, head, false 4가지 옵션이 있습니다.

true: 기본값, 스크립트 태그는 html 파일 본문 하단에 위치합니다.
body: true와 동일
head: script 태그는 head 태그 내에 위치합니다.
false: 생성된 js 파일을 삽입하지 않고 html 파일만 생성합니다.
favicon: 생성된 html 파일에 대한 파비콘을 생성합니다. 속성 값은 파비콘 파일의 경로 이름입니다.

// webpack.config.js
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    favicon: &#39;path/to/yourfile.ico&#39;
  }) 
]

로그인 후 복사

생성된 HTML 태그에는 이러한 링크 태그가 포함됩니다

<link rel="shortcut icon" href="example.ico" rel="external nofollow" >

로그인 후 복사

제목 및 파일 이름과 동일합니다. 템플릿 파일에 파비콘이 지정된 경우 이 속성은 무시됩니다.

minify

minify는 html 파일을 압축하는 데 사용됩니다. minify의 속성 값은 압축 옵션이거나 false입니다. 기본값은 false이며 생성된 html 파일은 압축되지 않습니다. 이 압축 옵션을 살펴보겠습니다.

html-webpack-plugin은 html-minifier를 내부적으로 통합합니다. 이 압축 옵션은 html-minify의 압축 옵션과 완전히 동일합니다.
간단한 예를 살펴보세요.

// webpack.config.js
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    minify: {
      removeAttributeQuotes: true // 移除属性的引号
    }
  })
]

로그인 후 복사

<!-- 原html片段 -->
<p id="example" class="example">test minify</p>

로그인 후 복사

<!-- 生成的html片段 -->
<p id=example class=example>test minify</p>

로그인 후 복사

hash

hash 옵션은 생성된 js 파일에 웹팩 컴파일의 해시 값인 고유한 해시 값을 제공하는 것입니다. 기본값은 false 입니다. 예시도 살펴보겠습니다.

// webpack.config.js
plugins: [
  new HtmlWebpackPlugin({
    ...
    hash: true
  })
]

로그인 후 복사

<script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>

로그인 후 복사

webpack 명령을 실행하면 생성된 html 파일의 스크립트 태그에서 참조하는 js 파일이 약간 변경된 것을 확인할 수 있습니다.

bundle.js 파일 다음에 나오는 해시 값 문자열은 이 웹팩 컴파일에 해당하는 해시 값입니다.

$ webpack
Hash: 22b9692e22e7be37b57e
Version: webpack 1.13.2

로그인 후 복사

cache

기본값은 true입니다. 내용이 변경될 때만 새 파일이 생성됨을 나타냅니다.

showErrors

showErrors의 기능은 webpack 컴파일 중에 오류가 발생하면 webpack이 오류 메시지를 pre 태그로 래핑하는 것입니다. 속성의 기본값은 true 입니다. 이는 오류 메시지가 표시된다는 의미입니다.

chunks

chunks 옵션은 주로 다중 항목 파일에 사용됩니다. 항목 파일이 여러 개인 경우 그에 따라 컴파일된 여러 js 파일이 생성됩니다. 그런 다음 청크 옵션은 생성된 js 파일을 사용할지 여부를 결정할 수 있습니다.

chunks는 기본적으로 생성된 html 파일의 모든 js 파일을 참조합니다. 물론 가져올 특정 파일을 지정할 수도 있습니다.

작은 예를 살펴보세요.

// webpack.config.js
entry: {
  index: path.resolve(__dirname, &#39;./src/index.js&#39;),
  index1: path.resolve(__dirname, &#39;./src/index1.js&#39;),
  index2: path.resolve(__dirname, &#39;./src/index2.js&#39;)
}
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    chunks: [&#39;index&#39;,&#39;index2&#39;]
  })
]

로그인 후 복사

webpack 명령어를 실행하면 생성된 index.html 파일에서 index.js와 index2.js만 참조되는 것을 볼 수 있습니다

...
<script type=text/javascript src=index.js></script>
<script type=text/javascript src=index2.js></script>

로그인 후 복사

그리고 Chunks 옵션을 지정하지 않으면 모두 참조됩니다. 기본.

excludeChunks

excludeChunks 옵션은 청크의 반대 개념으로 특정 js 파일을 제외하는 옵션입니다. 예를 들어 위의 예는 실제로 다음 줄과 동일합니다

...
excludeChunks: [&#39;index1.js&#39;]

로그인 후 복사

chunksSortMode

이 옵션은 스크립트 태그의 참조 순서를 결정합니다. 기본적으로 'none', 'auto', 'dependent', '{function}'의 네 가지 옵션이 있습니다.

'종속성' 말할 필요도 없이 다양한 파일의 종속성에 따라 정렬됩니다.
'auto' 기본값은 플러그인 내장 정렬방식인데 여기서는 구체적인 순서를 모르겠네요...
'none' 순서가 없나요? 잘 모르겠어요...
{function} 기능을 제공하나요? 그런데 함수의 매개변수가 무엇인지 잘 모르겠습니다...

이 옵션을 사용해 본 적이 있거나 구체적인 의미를 아는 학생이 있으면 알려주시기 바랍니다. . .

xhtml

부울 값, 기본값은 false 이며, true 인 경우 파일은 xhtml 호환 모드에서 참조됩니다.

요약

위는 new HtmlWebpackPlugin()에 전달되는 옵션을 요약한 것입니다. 모든 옵션의 의미를 이해한 후에는 프로젝트 빌드 시 보다 유연하게 사용할 수 있습니다. 모든 분들의 학습에 도움이 되길 바라며, 또한 모두가 Script Home을 응원해 주시길 바랍니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.