Uma breve análise do tutorial sobre o uso do plugin HTML Webpack

Use o plug-in HTML-WebPack-Plugin para iniciar a página para colocar a página HTML na memória para melhorar a velocidade de carregamento da página

Ele também pode definir automaticamente o caminho introduzido pelo arquivo JS na página Index.html

Pré -requisitos para uso: Webpack está instalado no projeto:

Sua função é gerar páginas HTML correspondentes na memória com base na página do modelo especificado.

Importar o plugin HTML-Webpack-Plugin no arquivo de configuração e configurar o caminho da página do modelo e o nome da página gerada

 const Path = requer (caminho) // Importar html-webpack-pluginconnst htmlwebpackplugin = requer (html-webpack-plugin) module.exports = {entrada: path.join (__ dirname,./src/dir.js), saída: {Path. Path. FILENAME: BUNDLE.JS}, // Configure plugins: [// Crie html-webpack-plugin plugin novo htmlwebpackplugin ({// Defina o modelo de parâmetro: Path.Join (__ Dirname,./Src/index.html), special.Join (__ Dirname,. nome do arquivo: index.html // especifique o nome das páginas geradas na memória})]}

Depois de usar o plug-in HTML-Webpack-Plugin, não há necessidade de processar manualmente o caminho de referência do bundle.js

Porque o caminho correto para pacote.js foi introduzido automaticamente na página HTML gerada na memória

1. Gere automaticamente uma página na memória com base na página especificada.

2. Introduzir automaticamente o Bundle.js na página

Este é o final deste artigo sobre uma breve análise do tutorial sobre o uso do plug -in HTML WebPack. Para obter um conteúdo de plug -in mais relacionado ao HTML Webpack, pesquise artigos anteriores do Wulin.com ou continue a procurar os artigos relacionados abaixo. Espero que todos apoiem o Wulin.com no futuro!