Ao escrever o código, o arquivo js em src é introduzido. Após o empacotamento do webpack, um arquivo de entrada é formado. Neste momento, o nome e o caminho do arquivo js em html estão errados. precisa ser empacotado e o arquivo html deve ser empacotado. O caminho para o arquivo js importado foi substituído.
Os benefícios de usar o webpack para empacotar html são:
(1) O arquivo js empacotado pode ser introduzido automaticamente no html
(2) Depois que o html for empacotado, ele ainda será gerado na pasta de construção e colocado junto com o arquivo js empacotado, para que quando estivermos online Você só precisa copiar as pastas geradas pelo empacotamento para o ambiente online
(3) Isso nos ajudará a compactar arquivos html
1. Instale o plug-in
nativamente
.só pode entender arquivos JS e JSON e deve suportar o empacotamento de outros arquivos. Todos os tipos de arquivos precisam instalar o plug-in ou carregador correspondente.
Se precisarmos empacotar arquivos HTML, primeiro precisamos instalar html-webpack-plugin :
npm install html-webpack-plugin -D
A função deste plug-in:
Criar um arquivo html sob a exportação por padrão, e então importar todos os recursos JS/CSS.
Você também pode especificar um arquivo html e adicionar recursos a este arquivo html
html-webpack-plugin
.
configure-o no arquivo webpack.config.js :
// ...
// 1. Introduzir o plug-in const HtmlWebpackPlugin = require('html-webpack-plugin');
módulo.exportações = {
// ...
// 2. Configure os plugins de plug-in em plugins: [
novo HtmlWebpackPlugin({
template: 'index.html', // Especifique o arquivo de modelo de entrada (relativo ao diretório raiz do projeto)
filename: 'index.html', // Especifique o nome e o local do arquivo de saída (em relação ao diretório de saída)
// Para outros itens de configuração do plug-in, você pode visualizar a documentação oficial do plug-in})
]
} Link de configuração detalhada: https://www.npmjs.com/package/html-webpack-plugin
Certifique-se de que o caminho e o nome do arquivo do modelo de entrada sejam consistentes com a configuração e então você poderá compilar.
3. Ao configurar várias entradas JS e várias situações HTML
, vários arquivos HTML precisam ser compilados e os arquivos precisam importar diferentes arquivos JS. No chunk , por padrão, o arquivo HTML empacotado importará todos os arquivos JS empacotados. especificado para distribuir JS.
const caminho = require('caminho');
// 1. Introduzir o plug-in const HtmlWebpackPlugin = require('html-webpack-plugin');
módulo.exportações = {
// ...
// 2. Configure a entrada JS (múltiplas entradas)
entrada: {
fornecedor: ['./src/jquery.min.js', './src/js/common.js'],
índice: './src/index.js',
carrinho: './src/js/cart.js'
},
//Configurar saída de exportação: {
nome do arquivo: '[nome].js',
caminho: path.resolve(__dirname, 'build/js')
},
// 3. Configurar plug-ins: [
novo HtmlWebpackPugin({
modelo: 'index.html',
nome do arquivo: 'index.html',
// Use chunk para especificar quais arquivos JS importar chunk: ['index', 'vendor']
}),
// Quantos HTMLs precisam ser compilados, quantos novos plug-ins são necessários new HtmlWebpackPlugin({
modelo: './src/cart.html',
nome do arquivo: 'carrinho.html',
pedaço: ['carrinho', 'fornecedor']
})
]
} Dica: O que precisa ser observado aqui é quantos arquivos HTML você precisa compilar, quantas vezes você precisa criar um novo
HtmlWebpackPlugin.
Depois que a configuração acima for compilada com sucesso, a saída será a seguinte:
build
|__ index.html #Introduza index.js e vendor.js
|__ cart.html #Apresente cart.js e vendor.js
|__js
|__ vendor.js # Gerado por jquery.min.js e common.js |__ index.js # Gerado por index.js |__ cart.js # Gerado por cart.js para 1, webpack. config.js configuração
const HTMLWebpackPlugin = require('html-webpack-plugin')
...
plug-ins: [
// html-webpack-plugin configuração de empacotamento html Este plug-in irá gerar um arquivo HTML5 para seu novo HTMLWebpackPlugin({
template: "./index.html", // Caminho relativo ou absoluto empacotado para o modelo (destino do pacote)
title: 'Home', // Título usado para o documento HTML gerado hash: true, //true anexa o hash de compilação exclusivo do webpack a todos os scripts e arquivos CSS incluídos. Usado principalmente para limpar o cache,
minify: { // Compacta HTML
colapsoWhitespace: true, // Recolher espaço em branco keepClosingSlash: true, // Manter lacunas fechadas removeComments: true, // Remover comentários removeRedundantAttributes: true, // Remover atributos redundantes removeScriptTypeAttributes: true, // Remover atributos de tipo de script Script removeStyleLinkTypeAttributes: true, // Excluir o atributo de tipo de link de estilo useShortDoctype: true, // Usar o tipo de documento curto preserveLineBreaks: true, // Preservar quebras de linha minifyCSS: true, // Compactar css no texto
minifyJS: true, // Compacta js em texto
}
}),
],
... 2. Neste momento nosso index.html
<!DOCTYPE html>
<html idioma="">
<cabeça>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>demonstração do webpack</title>
</head>
<corpo>
<div id="aplicativo">
configuração de empacotamento html</div>
</body>
</html> 3. Neste momento, nosso index.js
importa './../css/index.less'
função adicionar(x,y) {
retornar x + y
}
console.log(add(2,3)); 3. Digite o pacote no console webpack e descubra que o arquivo de saída do pacote possui um index.html adicional, o conteúdo é o seguinte
<!DOCTYPE html>
<html idioma="">
<cabeça>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>demonstração do webpack</title>
<script defer src="index.js"></script></head>
<corpo>
<div id="aplicativo">
configuração de empacotamento html</div>
</body>
</html> <script defer="" src="index.js"></script> é automaticamente introduzido no
navegador para abrir a saída empacotada index.html. Verifica-se que o estilo tem um efeito e o controle. a unidade também produz normalmente:
