3
respostas

path e publicPath no webpack.config.js

Um colega já fez essa pergunta, e para mim não foi esclarecida a questão.

Não ficou clara a necessidade de informar a chave publicPath, e qual a diferença entre path e publicPath.

O webpack-dev-server simplesmente ignora a chave path?

Já vi que tem artigos na Internet tentando explicar essa situação, conceituando um e outro, explicando as diferenças, mas ainda não consegui captar. Acho que valia a pena uma explicação mais detalhada aqui.

Trecho do arquivo webpack.config.js abaixo:

/* (código acima omitido) */

module.exports = {
    entry: './app-src/app.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'dist' // Local onde será gerado o bundle em memória
    },

/* (código abaixo omitido) */
3 respostas

Fala ai Gustavo, tudo bem? Vamos lá:

O publicPath é para dizer qual será o caminho que o Webpack irá fazer para buscar (baixar) os arquivos, exemplo:

Imagine que seu site está rodando em http://localhost:3000 e você setou o output.filename para bundle.js.

Se o publicPath estiver setado como / (valor padrão), ele irá tentar baixar o arquivo através do seguinte endereço: http://localhost:3000/bundle.js.

Caso você define o publicPath para assets, o endereço para baixar o bundle.js ficaria: http://localhost:3000/assets/bundle.js

Já o path é onde serão salvos os arquivos que o Webpack gerar.

Espero ter ajudado.

Diante da explicação, retomo a pergunta: Isso quer dizer que o webpack-dev-server simplesmente ignora a chave path?

Esqueci de responder essa pergunta, desculpa por isso.

Sim, o WebpackDevServer faz todo o processo em memória, ele não precisa salvar fisicamente os arquivos.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software