We Keep Coding

How to make webpack-dev-server serve my index.html

I'm trying to get an extremely simple bare-bones TypeScript project setup with Webpack and I'm having an incredibly hard time for some reason.
I followed this guide and everything is working. When I simply run webpack my files will bundle and compile and be outputted into the dist directory. From there I can host them on a local server and it all works fine.
However, I want to avoid having to manually bundle and compile my code every single time I make a change, and I'd like for this to be done automatically each time I save my files. As far as I can tell this is a common use for Webpack and so I'm not sure why I'm having such an incredibly hard time finding any good information on it.
I decided to use the webpack dev server to accomplish this, so I read this tutorial and for the life of me I can't find anybody who explains how to get it to also server my index.html? When I run webpack serve --mode=development all goes well, and when I navigate to the localhost port that I server to I get a 404 error.
One of the "tips" on the previously linked page reads
If you're having trouble, navigating to the /webpack-dev-server route will show where files are served. For example, http://localhost:9000/webpack-dev-server.
When I navigate to localhost:1234/webpack-dev-server it tells me that it's only serving a single file: bundle.js Clearly a JavaScript file alone is not going to work, and I need it to also serve the index.html file that's in my dist directory.
Now, my knowledge here is very limited as this is my first time working with Webpack, but here's all the detail I can give and hopefully it's not accidentally totally unrelated:
Whenever my dev server reloads itself (whenever it's booted up or if a watched file changes while it's running) it only updates the bundle.js file that it's serving. It doesn't update the bundle.js file stored in my dist directory on my hard drive. How can I make it update both?
And also, how do I make the server also serve my index.html file instead of only the bundle.js? Where is it even getting that bundle.js from? Is it compiling all of my code from scratch to create that js file or is it taking that out of the dist directory?
And additionally, am I going about this totally in the wrong way? Where should my index.html even go? I put my TypeScript files into a src directory and they're converted to .js files and moved into my dist directory... Should I also put my index.html inside src or does it belong in dist or somewhere else entirely? When I put index.html in src it doesn't get copied over into dist, it just ignores it completely. If my index.html file doesn't belong in src it must belong in dist, but if it belongs in dist then how can I expect the dev server to find it and serve it along with the other TypeScript files in src? Why can't the dev server just serve everything in dist and automatically compile everything from src into dist? I must be misunderstanding the flow of it all, but I have no idea where to look for an explanation and I've been at this for several hours now.
Just a general explanation of how it all works would be very helpful as well, as I can't find a single article or forum post anywhere that details all the spaghetti going on with Webpack. I've been avoiding bundlers and all this NPM mess for as long as I can because I constantly run into issues like this, but I finally decided to jump in and just push through all the mess and I'm already regretting it. If someone could just point me (and other people having similar problems) to some good resources for learning about all the automagic going on that would be hugely appreciated. The Webpack documentation and guides are very much worthless to a newbie.
My Webpack config file:
const path = require("path");
module.exports = {
entry: "./src/index.ts",
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
},
devServer: {
compress: false,
static: false,
client: {
logging: "warn",
overlay: {
errors: true,
warnings: false
},
progress: true
},
port: 1234, host: "0.0.0.0"
}
};

Is your entry set in webpack? So that it is included?
entry: {
main: 'path/to/index.ts'
},
You could also try adding to your index.ts file
require('file-loader?name=[name].[ext]!../index.html');
Or
require("./src/index.html");
// Then In your webpack config file add a loader
loaders : { { test: /\.html/, loader: 'file?name=[name].[ext]' } }
Otherwise you could always copy this file over with webpack copy plugin
{
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
}
will need to run npm install --save-dev html-webpack-plugin to install it. As well as move your index.html file into your src folder

Please visit localhost:1234/bundle (Where bundle.js is your bundled file) the magichHTML route, which will load the HTML file with the bundled script.

Setting up webpack/HMR for Shopify development

I am trying to setup webpack's dev server and HMR to work with Shopify theme development. When running the server and opening the local IP, I get this error from Shopify's DNS provider, CloudFlare.
How can I properly setup webpack to inject hot changes (css/JS) to my proxied Shopify store (the mystore.myshopify.com url)?
My webpack config as follows:
const path = require("path");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
mode: "development",
devServer: {
contentBase: false,
hot: true,
https: true,
proxy: {
"**": {
target: "http://mystore.myshopify.com",
secure: false
}
},
},
entry: "./src/scripts/index.js",
output: {
filename: "./app.js",
path: path.resolve(__dirname, "dist")
},
plugins: [
],
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
//postcss here (autoprefixer, babel etc)
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
],
},
};

My proposed solution for hot reloading with webpack and shopify.
In your package.json you will want the following scripts
A webpack build script that watches for changes. I have also added a progress parameter so I can see when it updates. This will be watching your /src folder for changes.
"webpack:build": "cross-env NODE_ENV=development webpack --watch --progress",
A shopify theme serve script that uploads the theme files from a /dist folder that is the output of a webpack build.
"shopify:serve": "cd dist && shopify theme serve"
You can link these two scripts together into one using the following.
"deploy:serve": "run-p -sr webpack:build shopify:serve"
So what happens is the webpack build script listens for changes in your /src code. When a change is main it re-builds the output to the /dist folder that shopify theme serve is listening on. When that updates, shopify uploads the changes.
Voila.
Here is the repo for this implementation if you want to play around - https://github.com/Sambuxc/9119-shopify-theme/
As of writing this, my dev versions are:
Node 18.7.0
Npm 8.15.0
Shopify Cli 2.21.0
Good luck and I hope this helps future developers.
Please reach out to me with any further questions if you get stuck.

Webpack - Bundle multiple/different versions of .css files

I would like to make my bundled .css file being generated by Webpack more configurable, so I can output different 'versions' - based on the same .css file - to make the life of developers working on my project in the future easier.
I would like to have the following steps:
Concat of all SCSS into CSS (bundle.css)
Minimize output of step 1 (bundle.min.css)
Embed all images from step 2 (bundle.b64.min.css)
Embed all fonts from step 3 (bundle.bs64.fonts.min.css)
In the end - after my build process -, I would have 4 distinct files in my dist folder. Would that me possible?
The way I'm currently doing it, I run a different script for each step - deletes dist folder, goes through project, produces the output. I would like to have a single script that does all of it at once without having to go through my project 4 times.
I kind of found a solution for it here:
Webpack Extract-Text-Plugin Output Multiple CSS Files (Both Minified and Not Minified)
But, for my specific case, I would have to return 4 different configurations in a array instead of a single object.

Ok so based on our comment conversation i'm gonna give you a workflow of steps 1-4, but with regular assets handling, not a bundling of assets (which i haven't heard of but maybe someone else can elaborate there).
So the steps:
bundle all scss files into 1 bundle.css
make sure this bundle is minified
add assets management to build for images
add assets management to build for fonts
The important things:
This workflow is basically a built by configuration. configuring the npm scripts with the package.json file, and configuring webpack with config.webpack.js. This will allow you to simply run 1 command to build your project: npm run build. note: For simplicity's sake i am going to ignore production/development/etc environments and focus on a single environment.
package.json:
This is used to set up the command that will actually run when you input npm run build in the terminal (from the project dir of course).
since we are avoiding different environments for now and as you are not using Typescript this is a very simple configuraton:
"scripts": {
"build": "webpack",
},
that's all you have to add. It sound's stupid now but when the project will get more complex you are going to like those scripts so better start off making them already.
webpack.config.js:
The major lifting will be made in this configuration file. This basically tells webpack what to do when you run it (which is what npm run build is doing).
first off let's install some plugins:
npm install --save-dev file-loader
npm install --save-dev html-webpack-plugin
npm install --save-dev mini-css-extract-plugin
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'production',
devtool: 'source-map'
entry: './client/src/app.jsx',
output: {
path: path.join(__dirname, 'client/dist/public'),
filename: 'bundle.[hash].js'
},
module: {
rules: [
{
test: /\.s?css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: false
}
},
'css-loader',
'sass-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
]
},
resolve: {
extensions: ['.js', '.json', '.jsx']
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './client/src/index_template.html'
}),
new MiniCssExtractPlugin({
filename: 'style.[hash].css',
chunkFilename: '[id].[hash].css'
}),
]
};
Notice i've added the htmlWebpackPlugin because it makes it easier to reference the correct hashed bundles automatically. Also I've assumed the app is a react app but you can just change the entry point to where your app loads from.
This is quite hard to do of the fly without testing things out, but i hope this gives you enough reference as to what you should change and do to get going with it.
Again i strognly recommend the webpack.js guides and documentation, they are very thorough and once you start getting the hang of it things start working smoothly.

webpack-dev-server hot reload not working

My file structure is:
dist
css
style.css
index.html
js
bundle.js
src
css
style.css
index.html
js
main.js
node_modules
webpack.config.js
package.json
My webpack.config.js looks like:
module.exports = {
entry: './src/js/main.js',
output: {
path: __dirname,
filename: './dist/js/bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['es2015']
}
},
{
test: /\.vue$/,
loader: 'vue'
}
]
}
};
I run:
webpack-dev-server --content-base dist --hot
And it builds and seems like it's working. localhost:8080 shows the expected result but hot-reload does just not work. When I change a file I can see in terminal that a rebuild is happening but nothing happens in the browser. Am I missing something in the config?

What worked for me is to write <script src="bundle.js"> and not <script src="dist/bundle.js"> in my index.html file.
// index.html
<script src="bundle.js"></script> // works
<script src="dist/bundle.js"></script> // doesn't work!
Keeping dist/bundle.js as the output file works perfectly fine if you just build it using webpack. But when using webpack-dev-server, the static file already in the file system continues to be served, and not the latest hot replacement. It seems webpack-dev-server gets confused when it sees dist/bundle.js in the html file and doesn't hot replace it, even though webpack.config.js is configured to that path.

When using webpack-dev-server, it builds all files internally and does not spit them out into your output path. Running webpack alone, without the dev server, does the actual compilation to disk. The dev server does everything in memory which speeds up re-compilation by a lot.
To fix your hot reload issue, set the content base to your source directory and enable inline-mode
Like so:
webpack-dev-server --content-base src --hot --inline

None of the options on this page worked for me. After changing the devServer section to:
devServer: {
port: 8080,
contentBase: ['./src', './public'], // both src and output dirs
inline: true,
hot: true
},
it worked.

For Webpack ^5.72.1
This worked for me,
devServer: {
port: 3000,
hot: false,
liveReload: true,
},
Note: liveReload will reload the whole application on file save but it will lose application state. Hot reloading preserves state. But liveReload seemed to fix the issue for me with css/html not loading on the browser after save, without having to refresh the browser.

--inline --hot wasn't an issue for me
If you are using redux can try this.
For some random reason redux-devtools was not allowing hot reload for me. Try removing it from root component and redux compose config.
Note: Use redux devtool browser extension with this config in your store configuration: window.devToolsExtension ? window.devToolsExtension() : f => f
Also, must read: https://medium.com/#rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96#.ejpsmve8f
Or try hot reload 3:
example: https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915

Webpack hot reloading stopped working for me as well. The solution for me was to delete the node_modules folder and fresh install all dependencies.
Just open the parent folder of node_modules in your terminal and run npm install

100% Working Solution
You have to just follow 3 steps and you will get your hot reloading as you expected
Include "publicPath" key in "Output" property of webpack config. "publicPath" should contain path to your bundle.js file so that dev-server will know if there is any change in your bundle.js file and it will reload your application.
Your config should look like this -
output: {
path: __dirname,
publicPath:"/dist/js/",
filename: './dist/js/bundle.js'
}
Add "devServer" option in config file -
devServer:{
contentBase:"/src/",
inline:true,
stats:"errors-only"
}
Please note that contentBase should point to the path where you put your index.html file which contain your script tag in your case it will be "/src/"
At last you have to make sure 'src' attribute of your 'script' tag in index.html points to bundle.js starting from "http://localhost:port" as follow -
<script src="http://localhost:portnumber + value in publicPath + bundle.js"></script>
in your case it will look like this -
<script src="http://localhost:8080/js/dist/bundle.js" type="text/javascript"></script>
And finally remember webpack-dev-server doesn't compile your js file or make build or watch on your js file it dose everything in memory to watch on your js file you have to run
webpack --watch
in seprate window

The only thing that works for me is apply the "hotOnly" inside the configuration of the "devServer" (on the "webpack.config.js"), like this:
devServer: {
hotOnly: true,
},
After reload the "Webpack Dev Server", the "Hot Reload" works, at least, after saving any change in CSS or JS files.

All those who suffer: don’t forget slash before public path:
publicPath:’/assets/scripts/‘ not publicPath:’assets/scripts/’
Three days lost because of 1 forward slash in the path string

Try this:
In your package.json file, delete the line that contains "test" "echo \"Error: no test specified\" && exit 1" under the scripts object, and replace it with:
...
"scripts": {
"start": "webpack-dev-server --hot"
},
...
Then to restart your project, just use npm start.
This worked for me when I ran into this problem.
Edit: Can you share your package.json file?
Try adding this to webpack.config.js as well
devServer: {
inline: true,
port: 3000,
hot: true
},

Check your console logs if it has below error then add cors to your webpack dev server file
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin react hot reload
Ideally add below entry in you dev server js
headers: { "Access-Control-Allow-Origin": "*" },

I increased the max number of file changes that can be watched and it worked for me. I guess the issue for me was too many files.
echo fs.inotify.max_user_watches=1999999 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
source

You can try adding this to your config:
module.exports = {
...
devServer: {
contentBase: './dist/', // Since your index.html is in the "dist" dir
open: true, // Automatically open the browser
hot: true, // Automatically refresh the page whenever bundle.js changes
// (You will have to refresh manually if other files change)
},
...
};
And then running (no options):
webpack-dev-server

With the above settings, while using webpack-dev-server for static page building I add bundle js or whatever js file configured as output to the html page. This way I get refresh on my static page after any changes.

For webpack version 5, the module.loaders is now module.rules. And for the presets change query to options.

Make sure in development mode you are not using a plugin that extract css into files, example MiniCssExtractPlugin. It messes the things up.

Webpack-dev-server doesn't build files on change

So I have the following webpack configuration :
import path from 'path';
module.exports = {
entry: {
index: './dev/index.js'
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: './dist/',
filename: 'bundle.js',
chunkFilename: '[id].bundle.js'
},
module:{
loader:{
test: /\.js$/,
exclude:path.resolve(__dirname, "node_modules"),
loader: 'js'
}
}
};
The problem is that when I do webpack --watchthe file does build in the /dist/ folder at every change. Yet when I run the webpack-dev-server the files don't even build. Why is that?
Please help.

The reason you are not seeing files emitted into your dist folder is because webpack-dev-server uses an in-memory filesystem
This allows for extremely fast incremental builds when your code changes. This was an intentional design on our part. You can view the resulting code in your browser and never need to reference those files.
It is not recommended by us, for the sake of build performance, but you can look in to plugins like write-file-webpack-plugin if you need this feature.

'webpack' writes your bundle to disk, whereas 'webpack-dev-server' loads the bundle into memory. So when running the latter command you wont see a new 'bundle.js' file appear in your file system, even though you should see output to the console reporting the bundling and the start up of the dev server).
The output.publicPath config key determines the location of the in-memory bundle on the host dev server. So if you set the publicPath to 'dist' then the index.html served by the webpack dev server will need a script tag in order to reference the bundle.