Os documentos do Webpack declaram que output.publicPath
é:
A
output.path
partir da visualização do JavaScript.
Poderia, por favor, explicar o que isso realmente significa?
Eu uso output.path
e output.filename
para especificar onde o Webpack deve gerar o resultado, mas não sei ao certo o que colocar output.publicPath
e se é necessário.
module.exports = {
output: {
path: path.resolve("./examples/dist"),
filename: "app.js",
publicPath: "What should I put here?"
}
}
javascript
webpack
Misha Moroshko
fonte
fonte
path
e quandopublicPath
?Respostas:
output.path
Diretório de disco local para armazenar todos os seus arquivos de saída (caminho absoluto) .
Exemplo:
path.join(__dirname, "build/")
O Webpack produzirá tudo em
localdisk/path-to-your-project/build/
output.publicPath
Onde você enviou seus arquivos agrupados. (Relativo à raiz do servidor)
Exemplo:
/assets/
Supondo que você implantou o aplicativo na raiz do servidor
http://server/
.Ao usar
/assets/
, o aplicativo vai encontrar Webpack ativos em:http://server/assets/
. Sob o capô, todos os URLs encontrados pelo webpack serão reescritos para começar com "/assets/
".fonte
Quando executado no navegador, o webpack precisa saber onde você hospedará o pacote gerado. Assim, é possível solicitar blocos adicionais (quando se usa a divisão de código ) ou arquivos referenciados carregados através do arquivo-loader ou url-loader respectivamente.
Por exemplo: Se você configurar seu servidor http para hospedar o pacote gerado,
/assets/
você deve escrever:publicPath: "/assets/"
fonte
o publicPath é usado apenas para fins de desenvolvimento, Fiquei confuso na primeira vez que vi essa propriedade de configuração, mas faz sentido agora que usei o webpack por um temposuponha que você coloque todo o arquivo de origem js na
src
pasta e configure seu webpack para construir o arquivo de origem nadist
pastaoutput.path
.Mas você deseja servir seus ativos estáticos em um local mais significativo como
webroot/public/assets
, desta vez, você pode usarout.publicPath='/webroot/public/assets'
, para que em seu html possa referenciar seus js<script src="/webroot/public/assets/bundle.js"></script>
.quando você solicitar
webroot/public/assets/bundle.js
owebpack-dev-server
encontrará os js na pasta distAtualizar:
obrigado por Charlie Martin para corrigir minha resposta
original: o publicPath é usado apenas para fins de desenvolvimento, não é apenas para fins de desenvolvimento
fonte
publichPath
seqüestrar solicitações e retornar os arquivos na memória.webpack -p
para construir seus ativos, e seus ativos devem ser atendidos pelo servidor de aplicativos ou pelo servidor nginx, em vez do servidor webpack ou pelo middleware webpack, para que essa configuração não seja mais útil no ambiente de produção, estou certo ?Você pode usar publicPath para apontar para o local em que deseja que o webpack-dev-server sirva seus arquivos "virtuais". A opção publicPath será o mesmo local da opção de compilação de conteúdo para o webpack-dev-server. O webpack-dev-server cria arquivos virtuais que serão usados quando você o iniciar. Esses arquivos virtuais se assemelham aos arquivos agrupados reais criados pelo webpack. Basicamente, você deseja que a opção --content-base aponte para o diretório em que seu index.html está. Aqui está um exemplo de configuração:
O webpack-dev-server criou uma pasta de ativos virtuais junto com um arquivo bundle.js virtual ao qual se refere. Você pode testar isso acessando localhost: 8080 / assets / bundle.js e, em seguida, verifique seu aplicativo para esses arquivos. Eles são gerados apenas quando você executa o servidor webpack-dev.
fonte
/build/bundle.js
vou ter que mudar osrc
no meuindex.html
arquivo certo?src
linha no arquivo index.html. No momento, ele está apontando para"assets/bundle.js"
a mudança para a produção do pacote,"build/bundle.js"
então terei que mudar isso na linha html src parasrc="build/bundle.js"
. Ou existe uma maneira mais automatizada?/assets/
para/build
. Dessa forma, não preciso alterar meu index.html. Também mudei meu index.html da pasta de compilação e para a raiz do aplicativo.no meu caso, tenho um cdn e colocarei todos os meus arquivos estáticos processados (js, imgs, fontes ...) no meu cdn, suponha que o URL seja http://my.cdn.com/
portanto, se houver um arquivo js que é o URL de referência original no html é './js/my.js', ele deverá se tornar http://my.cdn.com/js/my.js no ambiente de produção
Nesse caso, o que eu preciso fazer é simplesmente definir publicpath como http://my.cdn.com/ e o webpack adicionará automaticamente esse prefixo
fonte
filename especifica o nome do arquivo no qual todo o seu código em pacote será acumulado após a etapa de compilação.
path especifica o diretório de saída em que o app.js (nome do arquivo) será salvo no disco. Se não houver diretório de saída, o webpack criará esse diretório para você. por exemplo:
Isso criará um diretório myproject / examples / dist e, nesse diretório, ele cria app.js , /myproject/examples/dist/app.js . Após a construção, você pode navegar para myproject / examples / dist / app.js para ver o código em pacote
publicPath: "O que devo colocar aqui?"
publicPath especifica o diretório virtual no servidor Web de onde o arquivo compactado, app.js será distribuído. Lembre-se de que a palavra servidor ao usar publicPath pode ser webpack-dev-server ou express server ou outro servidor que você possa usar com o webpack.
por exemplo
essa configuração diz ao webpack para agrupar todos os seus arquivos js em examples / dist / app.js e gravar nesse arquivo.
publicPath diz ao webpack-dev-server ou express server para servir esse arquivo em pacote, por exemplo, examples / dist / app.js, a partir do local virtual especificado no servidor, por exemplo, / public / assets / js. Portanto, no seu arquivo html, você deve fazer referência a esse arquivo como
Portanto, em resumo, publicPath é como mapear entre
virtual directory
no servidor eoutput directory
especificado pela configuração output.path. Sempre que a solicitação do arquivo public / assets / js / app.js vier, o arquivo /examples/dist/app.js será exibidofonte
A documentação do webpack2 explica isso de uma maneira muito mais limpa: https://webpack.js.org/guides/public-path/#use-cases
fonte
publicPath é usado pelo webpack para o caminho relativo de substituição definido em seu css para referenciar imagem e arquivo de fonte.
fonte