Menu
I'm teaching myself webpack from scratch and I am trying to use the webpack-dev-server to live update the browser when I change a .js in my app file and show the changes. Say I have the following package.json
{
"name": "webpack-babel",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"serve": "webpack-dev-server --hot",
"start": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-es2015": "^6.22.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
}
}
and this is my webpack.config.json
const path = require('path');
const config = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
],
}
};
module.exports = config;
I have the following code in my ./app/index.js (nothing crazy here):
let message = 'I love socks and snacks !';
console.log(message);
When I run npm run serve change the message in my app/index.js to 'I love cola and snacks !!!' and save the terminal does compile but nothing is updated in the browser. The bundle file still contains the old message and isn't being generated. What am I doing wrong? I only started trying this a few hours ago so I am a bit of a newbi with webpack.
I have turned off "safe write' in my IDE and my file structure is like so:
this is my index.html...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
* UPDATE * adding publicPath: 'dist/' to the output object seems to work... but I am unsure if this is the correct solution to my problem.
467
The bundle file still contains the old message and isn't being generated.
webpack-dev-server does not create any file, but serves the bundle from memory when the according path is hit. By default this is /, so when you try to load /bundle.js, you will get bundle from memory.
But in your index.html you request /dist/bundle.js. The only reason it can find it in the first place, is because you generated it and it's actually present on your file system. To be clear if you go to:
http://localhost:8080/dist/bundle.js
you get the bundle from your file system, but when you go to:
http://localhost:8080/bundle.js
you get the bundle from memory by webpack-dev-server, although it doesn't exist on your file system.
As you've correctly examined, you can change that path with the publicPath option. So setting publicPath: '/dist/' will make webpack-dev-server serve the bundle from memory when /dist/bundle.js is hit, regardless of whether that file exists on your file system.
Setting output.publicPath also affects some loaders that include assets, as seen in the example of html-loader. If you don't desire that effect, you can use devServer.publicPath instead, to only change the behaviour of webpack-dev-server. But as mentioned in the docs, it's recommended for them to be the same.
62
According to latest webpack DOC, devServer configuration should like this.
devServer: {
static: './dist/',
hot: true,
devMiddleware: {
publicPath: '/dist/',
writeToDisk: true,
},
}If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
