HTML-Webpack-Plugin 플러그인을 사용하여 페이지를 시작하여 HTML 페이지를 메모리에 넣어 페이지의로드 속도를 향상시킵니다.
또한 index.html 페이지에서 JS 파일에 의해 소개 된 경로를 자동으로 설정할 수도 있습니다.
사용을위한 전제 조건 : Webpack은 프로젝트에 설치됩니다.
1 단계 :cnpm i html-webpack-plugin -D HTML-Webpack-Plugin 플러그인을 개발 종속성에 설치하십시오.이 기능은 지정된 템플릿 페이지를 기반으로 메모리에서 해당 HTML 페이지를 생성하는 것입니다.
2 단계 : 플러그인이 설치된 후 webpack.config.js 의 구성 파일 수정구성 파일에서 html-webpack-plugin 플러그인을 가져 와서 템플릿 페이지 경로와 생성 된 페이지 이름을 구성하십시오 .
const path = require (path) // html-webpack-pluginconst htmlwebpackplugin = require (html-webpack-plugin) module.exports = {eptr.join (__ dirname,./src/main.js), 출력 : __ dirname (__ dirname,.),. filename : bundle.js}, // 구성 플러그인 구성 : [// html-webpack-plugin 플러그인 생성 new htmlwebpackplugin ({// set parameter 템플릿 : __ dirname,./src/index.html),/src/index.html) // 메모리에서 생성 된 페이지의 이름을 지정})]}HTML-Webpack-Plugin 플러그인을 사용한 후 Bundle.js의 기준 경로를 수동으로 처리 할 필요가 없습니다.
Bundle.js에 대한 올바른 경로가 메모리에서 생성 된 HTML 페이지에 자동으로 도입되었으므로
요약 - 플러그인의 일 :1. 지정된 페이지를 기반으로 메모리에서 페이지를 자동으로 생성합니다.
2. 패키지 된 번들 .js를 페이지에 자동으로 소개합니다
이것은 HTML Webpack 플러그인 사용에 대한 튜토리얼의 간단한 분석에 대한이 기사의 끝입니다. 관련 HTML Webpack 플러그인 콘텐츠는 wulin.com의 이전 기사를 검색하거나 아래 관련 기사를 계속 찾아보십시오. 나는 모두가 앞으로 Wulin.com을 지원하기를 바랍니다!