Introducción

Esta entrada es más que nada un recordatorio para mí mismo. Se trata de una configuración de webpack para compilar aplicaciones y solucionar un error en ruta de assets al compilar para producción.

WebPack: error con ruta de assets

Como sabemos, con webpack se minifica el JavaScript y CSS, se junta todo en un archivo y cosas automáticas. Lo malo es que al ejecutar:

npm run build

Se crea el archivo html pero con rutas sin el punto. Es decir, algo así:

/ruta/a/javascript.js

En lugar de:

./ruta/a/javascript.js

Dependiendo del servidor esto puede traer problemas por las cosas de las rutas relativas y absolutas. A mí me ha pasado con apache.

Solución a error de rutas con WebPack

Lo que tenemos que haces es editar el archivo config/index.js en donde hay unas líneas que dicen:

build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),

  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: '/static',
  assetsPublicPath: '/',

Lo que hay que cambiar son las dos últimas líneas del fragmento mostrado arriba:

• assetsSubDirectory
• assetsPublicPath

Para arreglar este problema añadimos un punto al inicio de cada ruta, así:

build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),

  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: './static',
  assetsPublicPath: './',

Luego, al ejecutar:

npm run build

Pondrá rutas relativas al crear los archivos para producción, quitando este problema.