All geek questions in one place

Webpack dev server cannot get `http: // localhost / 8080 / bundle.js`

Given this configuration:

var webpack = require('webpack'); const path = require('path') module.exports = { entry: "./src/index.js", output: { path: path.join(__dirname, 'dist'), publicPath: path.join(__dirname, 'dist'), filename: "bundle.js" }, devServer: { contentBase: "./dist", // hot: true, } }

Why won't the server application for webpack-dev-server load correctly? I have a 0% understanding of localhost, vs localhost / webpack-dev-server, vs publicPath, vs contentBase, etc. I know all these paths, and configuration keys are important for the correct setup of my project, but despite reading hours about them they remain as confusing as when I started.

If I go to localhost:8080/webpack-dev-server , I see in the console Get http://localhost:8080/bundle.js net: ERR_ABORTED`.

+1
source share
1 answer

The following are simple and simple rules for webpack and webpack-dev server:

  • output.path . It must be an absolute path or / . You can easily get it using path.join
  • output.filename . This should be the name of the output file without any additional path to the file.
  • devServer.contentBase . This is a physical disk location that serves as the root directory of the webpack-dev server when opening http://localhost:8080

By convention, we save both output.path and devServer.contentBase . The tricky part is when you start webpack cmd, it creates a physical bundle.js file.

But when you start webpack-dev-server , NO PHYSICAL OUTPUT is generated, but it stores the generated output in memory to avoid working with the file, which in turn helps to speed up the development / debugging cycle.

Thus, any change you make in the src.js or main.js file will generate a result, but will not write it to disk, and wepack-dev-server reads it directly from memory.

  1. output.publicPath . This is used by webpack, webpack-dev-server and another plugin to generate output or service the generated package. The default value is / .

This is a VIRTUAL PATH and does not need to be present on the physical disk. Example: final application name if several applications are located on the same server as /app1 , /app2 or some external CDN /CDN-Path .

It is also useful for React-Router <BrowserRouter basename='/app1'>

Now, in order to transfer the output file of the package that is generated and stored in memory, you need to add output.publicPath ie Virtual Path to the browser URL.

The final URL for the webpack-dev server will be: http://localhost:8080/<output.publicPath>/<output.filename>

In your case, either you change publicPath: path.join(__dirname, 'dist') to publicPath: '/dist' if it contains any spaces. You can verify it by typing path.join(__dirname, 'dist') , which returns the release path [different on MacOS and Window].

http://localhost:8080/dist/bundle.js

If you want to dig deeper, here is the URL

https://medium.com/p/webpack-understanding-the-publicpath-mystery-aeb96d9effb1

0
source

Source: https://habr.com/ru/post/1239250/

More articles:


All Articles