Saída: configurar a opção de saída pode controlar como o webpack grava arquivos compilados no disco rígido. Observe que, embora possam existir vários pontos de entrada , apenas uma configuração de saída é especificada.
Primeiro inicializamos um projeto npm init , instalamos webpack e webpack-cli localmente, depois criamos as pastas index.html , webpack.config.js e src no diretório raiz e criamos um main.js na pasta como o arquivo de entrada
Após a conclusão do trabalho de preparação, fica conforme mostrado na figura:
main.js
Componente(){
var div=document.createElement('div')
div.innerHTML="Vamos aprender a configuração de exportação juntos~"
retornar div
}
document.body.appendChild(Component()) index.html
<corpo>
<script src="./dist/bundle.js"></script>
</body> packag.json
"scripts": {
"test": "echo "Erro: nenhum teste especificado" && exit 1",
"build":"webpack" //Add }, então a parte de configuração: webpack.config.js
Configurar a opção output pode controlar como o webpack grava arquivos compilados no disco rígido.
Observe que mesmo que possa haver vários pontos入口, apenas uma configuração输出é especificada.
A seguir estão vários conceitos de configuração de saída:
1. Path
path especifica o local da saída do recurso e o valor necessário deve ser um path absoluto , como. :
const caminho=require('caminho')
módulo.exportações={
entrada:'./src/main.js',
saída:{
nome do arquivo: 'bundle.js',
//Defina o local de saída do recurso para o caminho do diretório dist do projeto: path.resolve(__dirname, 'dist')
},
} Após o Webpack 4, output.path foi padronizado para o diretório dist . A menos que precisemos alterá-lo, não há necessidade de configurá-lo separadamente, então se for webpack4 ou superior, você pode escrever:
module.exports={
entrada:'./src/main.js',
saída:{
nome do arquivo: 'bundle.js',
},
} 2. filename
A função de filename é controlar o nome do arquivo do recurso de saída , que está na forma de uma string. Aqui eu o nomeio bundle.js , o que significa que quero que os recursos sejam gerados em um arquivo chamado bundle.js:
module.exports={
entrada:'./src/main.js',
saída:{
nome do arquivo: 'bundle.js',
},
} Após o empacotamento, conforme mostrado na figura, uma pasta dist será gerada automaticamente com um arquivo bundle.js dentro dela.
filename pode ser não apenas o nome do pacote, mas também um caminho relativo.
Não importa se o diretório no caminho não existe, o Webpack criará o diretório ao gerar recursos, por exemplo:
module.exports = {.
saída: {
nome do arquivo: './js/bundle.js',
},
}; Conforme mostrado na imagem após a embalagem:
Em um cenário de múltiplas entradas , precisamos especificar um nome diferente para cada pacote gerado. O Webpack suporta o uso de um formulário semelhante a uma linguagem de modelo para gerar nomes de arquivos dinamicamente .
Antes disso, criamos um novo arquivo de entrada em src
.
função Componente(){
var div=document.createElement('div')
div.innerHTML="Eu sou o segundo arquivo de entrada"
retornar div
}
document.body.appendChild(Component()) webpack.config.js:
module.exports = {
entrada:{
principal:'./src/main.js',
vender:'./src/vender.js'
},
saída: {
nome do arquivo: '[nome].js',
},
}; Conforme mostrado na imagem após a embalagem:
[name] no nome do arquivo será substituído pelo nome do bloco, ou seja, principal e fornecedor. Portanto, vendor.js e main.js serão gerados no final
. Se você quiser ver o conteúdo, precisará alterar o conteúdo em index.html e combinar o caminho para o último pacote empacotado
<body>.
<script src="./dist/main.js"></script>
<script src="./dist/vender.js"></script>
</body> [Pergunta] Haverá uma necessidade neste momento. Como podemos fazer com que
index.htmladicione automaticamente o pacote gerado ao html para nós? O plug-in HtmlWebpackPlugin pode ser usado aqui. Veja abaixo detalhes
3.
Além de [name] que pode se referir ao nome do bloco, existem várias outras variáveis de modelo que podem ser usadas na configuração do nome do arquivo:
Eles podem: controlar o cache do cliente
[hash] e [chunkhash] estão diretamente relacionados ao conteúdo do pedaço. que o usuário baixe imediatamente a nova versão na próxima vez que solicitar o arquivo de recursos sem usar o cache local.
[query] também pode ter um efeito semelhante, mas não tem nada a ver com o conteúdo do bloco e deve ser especificado manualmente pelo desenvolvedor.
4. publicPath
publicPath é um item de configuração muito importante, usado para especificar a localização da solicitação de recursos.
Veja como exemplo o carregamento de imagens
.
componente de função() {
//...
var img = nova imagem();
myyebo.src = Img //Solicitar url
//...
} {
//...
consulta: {
nome: '[nome].[ext]',
caminho de saída: 'estático/img/',
publicPath: './dist/static/img/'
}
} Conforme mostrado no exemplo acima, o endereço de solicitação de imagem original é ./img.jpg , mas após adicionar publicPath à configuração, o caminho real se torna ./dist/static/img/img.jpg , então as imagens podem ser obtidas em recursos empacotados.
Existem 3 formas de publicPath:
HTML
podemos especificar publicPath como o caminho relativo do HTML. Ao solicitar esses recursos, o caminho do HTML da página atual será adicionado ao caminho relativo para formar a solicitação real.
//Suponha que o endereço HTML atual seja: https://www.example.com/app/index.html //O recurso carregado de forma assíncrona é denominado 1.chunk.js publicPath:"" //-->https://www.example.com/app/1.chunk.js pubilicPath:"./js" //-->https://www.example.com/app/js/1.chunk.js publicPath:"../assets/" //-->https://www.example.com/assets/1.chunk.js
Relacionado ao host
Se o valor de publicPath começar com "/", significa que o publicPath em desta vez começa com O nome do host da página atual é o caminho base
// Suponha que o endereço html atual seja: https://www.example.com/app/index.html //O recurso carregado de forma assíncrona é denominado 1.chunk.js publicPath:"/" //-->https://www.example.com/1.chunk.js pubilicPath:"/js/" //-->https://www.example.com/js/1.chunk.js
CDN relacionado
Os dois acima são caminhos relativos. Também podemos usar o caminho absoluto para configurar publicPath
. A situação geralmente ocorre quando recursos estáticos são colocados no CDN. Como seu nome de domínio é inconsistente com o nome de domínio da página atual, ele precisa ser especificado na forma de um caminho absoluto
quando publicPath é iniciado na forma de um cabeçalho de protocolo ou de um relativo. protocolo, significa que o caminho atual está relacionado ao CDN
// Suponha que o endereço html atual seja: https://www.example.com/app/index.html //O recurso carregado de forma assíncrona é denominado 1.chunk.js publicPath:"http://cdn.com/" //-->http://cdn.com/1.chunk.js publicPath:"https://cdn.com/" //-->https://cdn.com/1.chunk.js pubilicPath:"//cdn.com/assets" //-->//cdn.com/assets/1.chunk.js
1. Entrada única
O requisito mínimo para configurar o atributo output no webpack é definir seu valor para um objeto, incluindo os dois pontos a seguir:
filename é o nome do arquivo de saída.path do diretório de saída de destinomodule.exports={
entrada:'./src/main.js',
saída:{
nome do arquivo: 'bundle.js',
},
}
//Após o webpack 4, dist será gerado por padrão, então o caminho é omitido aqui 2.
Múltiplas entradas
Se a configuração criar vários "pedaços" separados, você deve usar espaços reservados para garantir que cada arquivo tenha um nome exclusivo.
é usado aqui. [name] do nome do arquivo mencionado.
Além disso, se você quiser colocar esses recursos na pasta especificada, você pode adicionar a configuração path
module.exports={.
entrada: {
principal: './src/main.js',
vender: './src/vender.js'
},
saída: {
nome do arquivo: '[nome].js',
caminho: __dirname + '/dist/assets' //Especifique que o pacote configurável é colocado no diretório /dist/assets}
}
// Gere após o empacotamento: ./dist/assets/main.js, ./dist/assets/vender.js Os problemas restantes acima neste capítulo podem ser resolvidos usando o plug-in HtmlWebpackPlugin
Instale o plug-
in npm install --save-dev html-webpack-plugin
configure o plug-in
const HtmlWebpackPlugin=require('html-webpack-plugin') //Carregar módulo module.exports = {
entrada:{
principal:'./src/main.js',
vender:'./src/vender.js'
},
//Adicionar plug-ins plug-ins:[
novo HtmlWebpackPlugin({
título:'gerenciamento de produção'
})
],
saída: {
nome do arquivo: '[nome].js',
},
}; Após a conclusão do empacotamento
, você verá que um novo index.html aparece em dist, que adiciona automaticamente os recursos gerados para nós. Após a abertura, você verá que o navegador exibirá o conteúdo.
Isso significa que você não precisa escrever index.html ao inicializar um projeto no futuro.
O código fonte pode ser obtido aqui:
https://sanhuamao1.coding.net/public/webpack-test/webpack-test/git/. arquivos