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

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.

Related

Cannot Get when running Webpack Config in React.js 2020

I run 'watch' to execute webpack dev sever "watch": "webpack-dev-server --progress"
it compiles with no issues detected in terminal. However, when i go to http://localhost:8080 , I receive an error message 'Cannot Get'
I've created a sandbox.
What I've tried so far adding writeToDisk: true in webpack.config.js and including loaders for svg "file-loader" and css "css-loader" which corrected another error i was having regarding not using a loader for css. I've also tried changing the port to 3000. Not sure how relevant this is to solving this issue but i am using webstorm ide.
UPDATE:
I fixed this issue by moving index.html and manifest.json in to the src folder.
My question now is is there away to make this work without moving index.html and manifest into the same folder as webpack.config.js? If possible i'd rather leave index.html and manifest in the public folder.
I'd suggest reading through webpack's documentation on Output Management.
To your question:
My question now is is there away to make this work without moving index.html and manifest into the same folder as webpack.config.js?
You can make this work using the official HtmlWebpackPlugin to generate your index.html file. You'll be able to point it at your own file, wherever you want it, and it will also let you scale your code eventually to generate the html file from a template.
new HtmlWebpackPlugin({
template: 'path/to/index.html'
})

Copy build files to another project using webpack

I have two project folders in the same parent folder. One is for front end files (JS, CSS, images etc.) and another is for the backend files. The frontend project uses webpack to build files into a dist folder. The backend project is the one which gets deployed to the server (or run on localhost).
So everytime I make change to a JS or CSS file, I run webpack build, copy the build files from frontend-project/dist folder to backend/frontend/js or backend/frontend/css folder and rerun the backend project.
This is really counter-productive. I want to copy the dist files automatically after build to the backend-project. Is there any way to do it in webpack using a plugin or without using one? I have used gulp for such kind of tasks before, but want to rely solely on webpack for now.
I tried the copy-webpack-plugin, but it doesn't run after the build, thus is not useful for me.
I see several ways how to reach your purposes:
You could specify your backend/frontend/js folder as an output folder for your bundles.
module.exports = {
//...
output: {
path: path.resolve(__dirname, '../backend/frontend')
}
};
If you need two copies of your bundles (one in frontend folder and another in the backend), you can use FileManagerPlugin to copy your bundle files to the backend after finishing of the build.
module.exports = {
//...
plugins: [
new FileManagerPlugin({
events: {
onEnd: {
copy: [
{
source: path.join(__dirname, 'dist'),
destination: path.join(__dirname, '../backend/frontend')
}
]
}
}
})
]
};
If you run build manually after every code change, I think this is unproductive. You can use webpack-dev-server to run build automatically when you develop. It doesn't store bundles in the file system, it keeps them in memory.

Webpack less-loader Missing Base Path on Production Build

I've got a vue-js app that uses webpack. Everything works fine in development and test environments, but I'm having trouble getting it to build for production.
I've got background images in the LESS files. The image files are in /static. (I'm not sure whether that's kosher or if they should be in side src/assets.)
At any rate, when the LESS has something like this:
background-url: url("/static/img/foobar/my-image.svg")
Then the compilted CSS will have the same url
background-url: url("/static/img/foobar/my-image.svg")
When the browser loaders, it can't find that imgate file. The browser is attempting to find the file here:
file:///static/img/foobar/my-image.svg
Can anyone recommend a way to prepend the absolute path when the app builds for production?
Do you have your static assets outside of our project directory in /static ?
Otherwise I don't get why your browser is trying to request it from file:///static/img/foobar/my-image.svg
anyway, your static assets should be part of your repo/project. They do not need to be in src directory, a /static folder within the root of your project is just fine.
when you compile your application - let's say into a dist folder - you should copy the images also in that dist folder. In my app I use the copy-webpack-plugin for that task (I have my images in ./public/assets/img/.. and I reference them as /assets/img/..)
const CopyWebpackPlugin = require('copy-webpack-plugin');
...
plugins: [
...
/** copy all files from the public folder to the compilation root */
new CopyWebpackPlugin([{
from: 'public',
to : ''
}]),
...
also you should make sure that you have the file-loader in place for your static assets. I use it like so:
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\??\#?v=[.0-9]+)?$/,
use : 'file-loader?name=assets/[name].[hash].[ext]'
}
I hope this will help you to resolve your problem.
I ended up moving the images into assets/img and then updating my webpack config to specify the directory using publicPath. Here's what it ended up looking like:
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'file-loader',
include: [resolve('src')],
options: {
limit: 10000,
name: '/[name].[hash:7].[ext]',
publicPath: path.resolve(__dirname, 'app')
}

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 not bundling even after showing bundle valid message

I've set up a basic react application with webpack but I couldn't get the webpack-dev-server running properly.
I've installed webpack-dev-server globally and tried running the command sudo webpack-dev-server --hot as hot reloading was required.
The project seems to be working fine with just webpack cmd. It builds into my build folder and I can get it working via some server but it wont work with webpack-dev-server. From terminal its clear that the build process has completed with no error being thrown [webpack: bundle is now VALID.] and its in fact watching properly because on any change it does trigger the build process but it doesn't really gets built [it doesn't serve my bundle.js]. I tried changing the entire config and still couldn't get the issue resolved.
It would be much appreciated if someone can help.
Following is my webpack.config.js file.
var path = require('path');
module.exports = {
devtool: '#inline-source-map"',
watch: true,
colors: true,
progress: true,
module: {
loaders: [{
loader: "babel",
include: [
path.resolve(__dirname, "src"),
],
test: /\.jsx?$/,
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'react', 'stage-0'],
}
}, {
loader: 'style!css!sass',
include: path.join(__dirname, 'src'),
test: /\.scss$/
}]
},
plugins: [],
output: {
path: path.join(__dirname, 'build/js'),
publicPath: '/build/',
filename: '[name].js'
},
entry: {
bundle: [
'./src/index.js'
]
},
devServer: {
contentBase: "./",
inline: true,
port: 8080
},
};
I've got the issue resolved by myself. Silly as it sounds but the issue was with the publicPath under the output object. It should match the path property instead of just /build/, i.e.,
output: {
path: path.join(__dirname, 'build/js'),
publicPath: '/build/js', // instead of publicPath: '/build/'
filename: '[name].js'
},
In my case I had to check where the webpack is serving the file.
You can see it:
http://localhost:8080/webpack-dev-server
Then I could see my bundle.js path > http://localhost:8080/dist/bundle.js
After that I used that /dist/bundle.js in my index.html <script src="/dist/bundle.js"></script>
Now it refreshes any file changes.
webpack-dev-server serves your bundle.js from memory. It won't generate the file when you run it. So bundle.js is not present as a file in this scenario.
If you wan't to use bundle.js, for example to optimize it's size or test your production deployment, generate it with webpack using the webpack command and serve it in production mode.
By the way, started from Webpack v4 it is possible to write in-memory assets to disk:
devServer: {
contentBase: "./",
port: 8080,
writeToDisk: true
}
See doc.
The fix to this for me was:
devServer: {
devMiddleware: {
writeToDisk: true,
}
}
https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-
Dev-server keeps the compiled file in memory, and I can't access it directly...
BUT! THE SOLUTION is that you have no need to access it, in development(even when you run your project on node server or localhost) use localhost:8080 to access your page, and that's where webpack-dev-server is serving your page and you can feel all advantages of using it(live reload!), BUT! it doesn't compile your bundle.js, SO! before production, you need to manually run webpack build command, and that's it! there is no way for dev-server to compile your bundle.js file! Good Luck!
Please refer to this - https://github.com/webpack/webpack-dev-server/issues/24
According to this, webpack dev server no longer writes to the disk. So, you wont be able to see the build file. Instead, it will be served from the memory. To get it working you have to set the proper path.
Example: in index.html loads the build file from '/dist/main.js' so in webpack config file set the output.publicPath to '/dist/'
In my case I was using VS Code and I had to restart it. I have noticed that vs code bugs up sometimes. The changes you make in configuration files (package.json, webpack.config.js etc.) do not take effect sometimes. So, in case you encounter a situation where something doesn't work even with the correct settings, just restart vs code.
I can't see any bug reports related to this. So that's strange. I'm thinking this bug is triggered if you change one of the configuration files some time later after you have already built the project multiple times.
If this is actually what's happening then it's a huge bug. I'll try switching to Visual Studio instead of Code and see if this still happens. If it does then it's probably an issue with webpack.

Categories