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.