Webpack & TypeScript Setup #4 - Webpack Dev Server

Hey gang, in this webpack & typescript tutorial I'll show you how to set up the webpack development server to preview our web page with.

🐱‍👤🐱‍👤 JOIN THE GANG -
----------------------------------------
🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Course Files:

🐱‍💻 🐱‍💻 Other Related Free Courses:

🐱‍💻 🐱‍💻 TypeScript Docs:

🐱‍💻 🐱‍💻 The Net Ninja Community Boards:

[leacoetzee]

Doing this tutorial in May 2022 and these are my versions:

```
"ts-loader": "^9.3.0",
"typescript": "^4.6.4",
"webpack": "^5.72.1",
"webpack-cli": "^4.9.2"
```
setting mode to 'development' and ignoring the 'publicPath' setting in webpack.config.js has got it working correctly for me.

Example:

```
module.exports = {
mode: 'development',
entry: './src/index.ts',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
include: [path.resolve(__dirname, 'src')]
}
]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public')
}
}
```

[_erfanm]

Note: If you get error just use "webpack serve" instead of "webpack-dev-server" in front of "serve" script, It will be ok.

[hyunduk]

Now webpack-dev-server automatically refreshes the page without additional configuration.

[goku_bbkha]

If anyone have an error with Content security policy, change the foldername dist to public. Worked for me!

[isaacsouza]

If anyone is having issues with the new code not being reflected in the browser, I had to change the publicPath to an empty string in the webpack.config.js file, like this, and it worked

output: {
publicPath: '',
filename: 'app.js',
path: path.resolve(__dirname, 'public')
}

[kallbacks]

Really awesome info you always put out, and to think I didn't need webpack but you proved me wrong thanks Shaun you really taught me something incredible today 🙏

[rajibchisim]

Usefull conent. makes me clear about publicPath.

[mdmustafanaim]

For those facing issue with publicPath not generating/compiling code in bundle.js try using this. -
----> set publicPath: 'auto',

Like this :

output: {
publicPath: 'auto',
filename: 'bundle.js',
path: path.resolve(__dirname, 'public'),
}

Many might ask why ?
As per the webpack documentation:


There are chances that you don't know what the publicPath will be in advance, and webpack can handle it automatically for you by determining the public path from variables like import.meta.url, document.currentScript, script.src or self.location. What you need is to set output.publicPath to 'auto'


Hope this helps! Happy coding

[_SkyDancer]

Why when I add publicPath it doesn't rebuild my bundle.js, and also dev-server doesn't refresh my chrome web page it just does nothing for some reason... maybe you know why?

output: {
publicPath: 'dist',
filename: 'script.js',
path: path.resolve(__dirname, 'dist')
}

[domhnallodubhlainn]

Great tutorial series! Cheers.
I'm still confused by one thing though.

How come webpack-dev-server "recompiles" on a save, yet this doesn't change the JS code it bundles to the browser? You said the server just stores the JS in memory, and doesn't create any output files on the disk. I understand that much, but what exactly is it recompiling on a save? How can it recompile the TS code and not have an updated JS bundle? Even if it does store it in memory, it's just recompiled it so therefore shouldn't it be updated?

And you mention that the solution to this is to specify the publicPath output directory from where it will serve the new bundle. How does this work to make it serve a new updated JS file, when it only stores the recompiled JS in memory anyway?

I can't seem to figure this out

[marcusdlp]

'DevTools failed to parse source map: < ... sockjs-client ... >'

Anyone know how to resolve this?

[asimsheikh]

I am not getting anything in console, I followed the tutorial line by line.
although no error found anywhere.

any suggestion please

[cadrissilver]

webpack-dev-serve does not work anymore ????
I had to change to "webpack serve"

[omemester]

I don't know if u know this but instead of adding the scripts to the bottom of the body u can just add it in the head then add "defer" to it

[constantinewesterink]

when i use dev server i get a "Cannot GET /" in browser. Anyone have a fix?

[athuldas]

If you get an error please copy paste this to package.json and not forget to install what i said below.

{
"name": "webpack-typescript",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"serve": "webpack serve",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "^9.1.1",
"typescript": "^4.2.4",
"webpack": "^5.36.2",
"webpack-cli": "^4.6.0",
"webpack-serve": "^4.0.0"
},
"dependencies": {},
"description": ""
}

uninstall webpack-dev-server
npm install webpack-serve
replace "serve": "webpack serve",

[kaimura]

publicPath: 'public' does not work for me - the files are not being rebuild on save! :c