Skip to content

Instantly share code, notes, and snippets.

@GiancarlosIO
Last active April 23, 2018 02:59
Show Gist options
  • Save GiancarlosIO/3bc8db1f34d74e1ecef4aad3aacc87f6 to your computer and use it in GitHub Desktop.
Save GiancarlosIO/3bc8db1f34d74e1ecef4aad3aacc87f6 to your computer and use it in GitHub Desktop.
module.exports = {
// ... el resto de tu configuración
entry: {
app: './static/js/app.js',
},
output: {
// el output.publicPath debe coincidir con el publicPath del devServer
publicPath: 'http://localhost:9000/static/js/',
filename: '[name].min.js',
},
// devServer es lo que necesitamos configurar para obtener hmr con webpack-dev-server
devServer: {
// url publica por donde podremos acceder a nuestros archivos
publicPath: 'http://localhost:9000/static/js/',
// puerto donde correrá webpack-dev-server (el default es 8080)
port: 9000,
// ACTIVAMOS EL HMR
hot: true,
/*
la configuración en headers es necesaria para decirle a webpack que acepte
peticiones de cualquier puerto (en este caso las peticiones que hará nuestro server de django para obtener los archivos js)
de lo contrario al hacer algún cambio en nuestro código la consola del navegador
nos motrará el siguiente mensaje:
"No 'Access-Control-Allow-Origin' header is present on the requested resource"
*/
headers: {
/*
también podemos colocar directamente la url en donde corre nuestro server de Django
'Access-Control-Allow-Origin': 'http://localhost:8000'
si lo hacemos urls como "http://mi-alias-de-localhost:8000" o "http://mi-ip-publica:8000"
no podrán acceder a nuestros archivos js, ya que no contienen el dominio(localhost) especificado.
*/
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET,OPTIONS,HEAD,PUT,POST,DELETE,PATCH',
'Access-Control-Allow-Headers': 'Origin, Content-Type, Accept, Authorization, X-Request-With',
'Access-Control-Allow-Credentials': 'true',
},
// para ver el resto de opciones puedes revisar:
// https://webpack.js.org/configuration/dev-server/#devserver
},
plugins: [
// ...tus otros plugins
// plugins necesarios para activar el hmr
// new webpack.NoEmitOnErrorsPlugin(), // en webpackv4 este plugin ya viene por default
new webpack.HotModuleReplacementPlugin(),
],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment