실제 프로젝트에서 설치 플러그인을 사용하는 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

실제 프로젝트에서 설치 플러그인을 사용하는 방법

php中世界最好的语言

Jun 09, 2018 am 11:23 AM

webpack

이번에는 실제 프로젝트에서 Installation Plug-in을 사용하는 방법과 실제 프로젝트에서 Installation Plug-in을 사용할 때 주의사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다.

이 플러그인은 특히 파일 이름에 해시 값이 포함되어 있고 이 값이 컴파일될 때마다 변경되는 경우 웹팩 번들을 제공하는 HTML 파일 생성을 단순화하는 데 사용됩니다. 이 플러그인을 사용하여 HTML 파일을 자동으로 생성하거나, lodash 템플릿을 사용하여 생성된 번들을 로드하거나, 번들을 직접 로드할 수 있습니다.

실제 프로젝트에서 설치 플러그인을 사용하는 방법

npm을 사용하여 플러그인을 설치하세요

$ npm install html-webpack-plugin@2 --save-dev

로그인 후 복사

기본 사용법

이 플러그인은 body 요소에서 스크립트를 사용하여 모든 웹팩을 포함할 수 있습니다.

var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpackConfig = {
 entry: 'index.js',
 output: {
  path: 'dist',
  filename: 'index_bundle.js'
 },
 plugins: [new HtmlWebpackPlugin()]
}

로그인 후 복사

이렇게 하면 dist 디렉터리에 index.html이라는 파일이 자동으로 생성되고 다음 내용이 포함됩니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Webpack App</title>
 </head>
 <body>
  <script src="index_bundle.js"></script> 
 </body>
</html>

로그인 후 복사

webpack 진입점이 여러 개인 경우에는 다음 번들에 포함됩니다. 생성된 스크립트 요소

웹팩 출력에 CSS 리소스가 포함된 경우(예: ExtractTextPlugin을 사용하여 추출된 CSS) 링크를 사용하여 HTML 페이지의 헤드 요소에 포함됩니다.

Configuration

은 일련의 구성을 수행할 수 있으며 다음 구성 정보를 지원합니다.

title: 페이지의 제목 요소를 생성하는 데 사용됩니다.
filename: 출력 HTML 파일 이름, 기본값은 index입니다. .html, 하위 디렉터리로 직접 구성할 수도 있습니다.
템플릿 파일 경로, html!./index.html
inject: true | 'head' | 'body' | false , 모든 리소스를 특정 템플릿 또는 templateContent에 삽입 true 또는 body로 설정하면 모든 자바스크립트 리소스는 body 요소의 하단에 배치되고 'head'는 head 요소에 배치됩니다.
favicon: 출력 HTML 파일에 특정 파비콘 경로를 추가합니다.
minify: {} | false, html-minifier 옵션을 전달하여 출력 축소
hash: true | false, true인 경우 포함된 모든 스크립트 및 CSS 파일에 고유한 webpack 컴파일 해시를 추가합니다. 삭제에 유용합니다. 은닉처.
cache: true | false, true인 경우 이것이 기본값이며 파일은 수정된 후에만 게시됩니다.
showErrors: true | false, true이면 기본값이며 오류 메시지는 HTML 페이지에 기록됩니다
chunks: 특정 청크만 추가할 수 있습니다(예: 단위 테스트 청크만) )
chunksSortMode: 페이지에 추가되기 전에 청크가 정렬되는 방식을 제어할 수 있습니다. 지원되는 값: 'none' | 'default' | {function}-default:'auto'
excludeChunks: 건너뛰기 허용 특정 청크(예: 단위 테스트 블록 건너뛰기)

아래 예에서는 이러한 구성을 사용하는 방법을 보여줍니다.

{
 entry: 'index.js',
 output: {
  path: 'dist',
  filename: 'index_bundle.js',
  hash: true
 },
 plugins: [
  new HtmlWebpackPlugin({
   title: 'My App',
   filename: 'assets/admin.html'
  })
 ]
}

로그인 후 복사

여러 HTML 파일 생성

구성 파일에 이 플러그인을 여러 번 추가하여 여러 HTML 파일을 생성하세요.

{
 entry: 'index.js',
 output: {
  path: 'dist',
  filename: 'index_bundle.js'
 },
 plugins: [
  new HtmlWebpackPlugin(), // Generates default index.html 
  new HtmlWebpackPlugin({ // Also generate a test.html 
   filename: 'test.html',
   template: 'src/assets/test.html'
  })
 ]
}

로그인 후 복사

맞춤 템플릿 작성

기본으로 생성된 HTML 파일이 요구 사항에 맞지 않으면 나만의 맞춤 템플릿을 만들 수 있습니다. 편리한 방법은 주입 옵션을 전달한 다음 이를 사용자 정의 HTML 파일에 전달하는 것입니다. html-webpack-plugin은 필요한 모든 CSS, js, 매니페스트 및 파비콘 파일을 마크업에 자동으로 삽입합니다.

plugins: [
 new HtmlWebpackPlugin({
  title: 'Custom template',
  template: 'my-index.html', // Load a custom template 
  inject: 'body' // Inject all scripts into the body 
 })
]

로그인 후 복사

my-index.html 파일

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 <body>
 </body>
</html>

로그인 후 복사

템플릿 로더가 있는 경우 이를 사용하여 이 템플릿을 구문 분석할 수 있습니다.

module: {
 loaders: [
  { test: /\.hbs$/, loader: "handlebars" }
 ]
},
plugins: [
 new HtmlWebpackPlugin({
  title: 'Custom template using Handlebars',
  template: 'my-index.hbs',
  inject: 'body'
 })
]

로그인 후 복사

또한 패턴이 문자열인 경우 templateContent를 사용하여 전달할 수 있습니다.

plugins: [
 new HtmlWebpackPlugin({
  inject: true,
  templateContent: templateContentString
 })
]

로그인 후 복사

주입 기능이 요구 사항에 맞지 않고 리소스 배치를 완전히 제어하려는 경우. 기본 템플릿을 시작점으로 사용하여 lodash 구문을 직접 사용하여 자신만의 템플릿을 만들 수 있습니다.

templateContent 옵션은 jade:

plugins: [
 new HtmlWebpackPlugin({
  templateContent: function(templateParams, compilation) {
   // Return your template content synchronously here 
   return '..';
  }
 })
]

로그인 후 복사

또는 비동기 버전

plugins: [
 new HtmlWebpackPlugin({
  templateContent: function(templateParams, compilation, callback) {
   // Return your template content asynchronously here 
   callback(null, '..');
  }
 })
]

로그인 후 복사

과 같은 다른 언어를 사용하기 위한 함수일 수도 있습니다. template과 templateContent가 동시에 사용되면 플러그인에서 오류가 발생합니다. .

变量 o 在模板中是在渲染时传递进来的数据，这个变量有如下的属性：

1、htmlWebpackPlugin: 这个插件的相关数据 ◦

htmlWebpackPlugin.files: 资源的块名，来自 webpack 的 stats 对象，包含来自 entry 的从 entry point name 到 bundle 文件名映射。

"htmlWebpackPlugin": {
 "files": {
  "css": [ "main.css" ],
  "js": [ "assets/head_bundle.js", "assets/main_bundle.js"],
  "chunks": {
   "head": {
    "entry": "assets/head_bundle.js",
    "css": [ "main.css" ]
   },
   "main": {
    "entry": "assets/main_bundle.js",
    "css": []
   },
  }
 }
}

로그인 후 복사

如果在 webpack 配置文件中，你配置了 publicPath，将会反射正确的资源

htmlWebpackPlugin.options: 传递给插件的配置。

2、webpack: webpack 的 stats 对象。

3、webpackConfig: webpack 配置信息。

过滤块

可以使用 chunks 来限定特定的块。

plugins: [
 new HtmlWebpackPlugin({
  chunks: ['app']
 })
]

로그인 후 복사

还可以使用 excludeChunks 来排除特定块。

plugins: [
 new HtmlWebpackPlugin({
  excludeChunks: ['dev-helper']
 })
]

로그인 후 복사

事件

通过事件允许其它插件来扩展 HTML。

html-webpack-plugin-before-html-processing
html-webpack-plugin-after-html-processing
html-webpack-plugin-after-emit

使用方式：

compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {
 htmlPluginData.html += 'The magic footer';
 callback();
});

로그인 후 복사

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7490

Cakephp 튜토리얼

1377

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

VUE3 시작하기 튜토리얼: Webpack을 사용한 패키징 및 빌드 Jun 15, 2023 pm 06:17 PM

Vue는 대화형의 효율적인 웹 애플리케이션을 신속하게 구축하는 데 도움이 되는 탁월한 JavaScript 프레임워크입니다. Vue3은 Vue의 최신 버전으로, 많은 새로운 특징과 기능을 도입했습니다. Webpack은 현재 프로젝트의 다양한 리소스를 관리하는 데 도움이 되는 가장 인기 있는 JavaScript 모듈 패키저 및 빌드 도구 중 하나입니다. 이 기사에서는 Webpack을 사용하여 Vue3 애플리케이션을 패키징하고 빌드하는 방법을 소개합니다. 1. 웹팩 설치

VITE와 웹팩의 차이점은 무엇입니까 Jan 11, 2023 pm 02:55 PM

차이점: 1. 웹팩 서버의 시작 속도는 Vite의 시작 속도보다 느립니다. Vite는 시작할 때 패키징할 필요가 없고 모듈 종속성을 분석하고 컴파일할 필요가 없으므로 시작 속도가 매우 빠릅니다. 2. Vite 핫 업데이트는 Vite의 HRM 측면에서 webpack보다 빠릅니다. 특정 모듈의 내용이 변경되면 브라우저가 모듈을 다시 요청하게 됩니다. 3. Vite는 esbuild를 사용하여 종속성을 사전 구축하는 반면 webpack은 노드를 기반으로 합니다. 4. Vite의 생태계는 웹팩만큼 좋지 않으며, 로더와 플러그인도 충분히 풍부하지 않습니다.

모듈식 개발에 PHP와 웹팩을 사용하는 방법 May 11, 2023 pm 03:52 PM

웹 개발 기술이 지속적으로 발전하면서 프론트엔드와 백엔드 분리, 모듈화 개발이 보편화된 추세가 되었습니다. PHP는 일반적으로 사용되는 백엔드 언어입니다. 모듈식 개발을 수행할 때 모듈을 관리하고 패키징하려면 몇 가지 도구를 사용해야 합니다. Webpack은 사용하기 매우 쉬운 모듈식 패키징 도구입니다. 이 글에서는 모듈 개발을 위해 PHP와 웹팩을 사용하는 방법을 소개합니다. 1. 모듈형 개발이란 무엇입니까? 모듈형 개발은 프로그램을 서로 다른 독립적인 모듈로 분해하는 것을 의미합니다.

webpack은 es6을 es5 모듈로 어떻게 변환합니까? Oct 18, 2022 pm 03:48 PM

구성 방법: 1. 가져오기 방법을 사용하여 ES6 코드를 패키지된 js 코드 파일에 넣습니다. 2. npm 도구를 사용하여 babel-loader 도구를 설치합니다. 구문은 "npm install -D babel-loader @babel/core"입니다. @babel/preset-env"; 3. babel 도구의 구성 파일 ".babelrc"를 생성하고 트랜스코딩 규칙을 설정합니다. 4. webpack.config.js 파일에서 패키징 규칙을 구성합니다.

Spring Boot 및 Webpack을 사용하여 프런트엔드 프로젝트 및 플러그인 시스템 구축 Jun 22, 2023 am 09:13 AM

최신 웹 애플리케이션의 복잡성이 계속 증가함에 따라 우수한 프런트엔드 엔지니어링 및 플러그인 시스템을 구축하는 것이 점점 더 중요해지고 있습니다. Spring Boot와 Webpack의 인기로 인해 프런트엔드 프로젝트와 플러그인 시스템을 구축하기 위한 완벽한 조합이 되었습니다. SpringBoot는 최소한의 구성 요구 사항으로 Java 애플리케이션을 생성하는 Java 프레임워크입니다. 개발자가 웹 애플리케이션을 더 빠르고 쉽게 구축하고 배포할 수 있도록 자동 구성과 같은 많은 유용한 기능을 제공합니다. 여

웹팩이란 무엇입니까? 작동 원리에 대한 자세한 설명? Oct 13, 2022 pm 07:36 PM

Webpack은 모듈 패키징 도구입니다. 다양한 종속성을 위한 모듈을 생성하고 이를 모두 관리 가능한 출력 파일로 패키징합니다. 이는 단일 페이지 애플리케이션(현재 웹 애플리케이션의 사실상 표준)에 특히 유용합니다.

webpack 패키지를 볼 수 있는 파일은 무엇입니까? Dec 20, 2022 pm 07:44 PM

vue에서 webpack은 js, css, picture, json 및 기타 파일을 브라우저 사용에 적합한 형식으로 패키징할 수 있으며, webpack에서는 js, css, picture, json 및 기타 파일 형식을 모듈로 사용할 수 있습니다. webpack에 포함된 다양한 모듈 리소스를 하나 이상의 패키지로 패키징하여 병합할 수 있으며 패키징 과정에서 이미지 압축, scss를 css로 변환, ES6 구문을 ES5로 변환 등의 리소스 처리가 가능합니다. html 파일 형식으로 인식됩니다.

웹팩은 es6을 지원하나요? Jan 18, 2023 pm 07:01 PM

웹팩은 es6을 지원합니다. Webpack 2는 기본 ES6 모듈 구문을 지원하므로 개발자는 babel과 같은 추가 도구를 도입하지 않고도 가져오기 및 내보내기를 사용할 수 있습니다. 그러나 다른 ES6+ 기능을 사용하는 경우에도 Babel 도구를 도입해야 합니다.

See all articles

실제 프로젝트에서 설치 플러그인을 사용하는 방법

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제