I’ve been working through “A Journey to Angular Development” by Sukesh Marla and am having issues at a section where webpack-dev-server is introduced. At this point the textbook has yet to get into Angular dev, this is a prerequisite chapter focused on Webpack.
Previously in the chapter, a basic example project was created consisting of the following files:
//lib1.js
export function getLib1Message() {
return getMessage();
}
function getMessage() {
return "lib1";
}
//lib2.js
import {getLib1Message} from "./lib1.js";
export function getLib2Message() {
return getLib1Message() + " & " + getMessage();
}
function getMessage() {
return "lib2";
}
//test.js
import {getLib2Message} from "./lib2.js";
alert(getLib2Message());
<!-- index.html -->
<html>
<head>
<title>
JS Webpack Demo
</title>
<script src="./dist/main.js"></script>
</head>
</html>
The scripts are named as the comments describe them. These are the only files present in the folder/directory where I am running the webpack-dev-server command mentioned later. For this example, the author does not indicate any usage of a webpack config file.
After installing webpack-dev-server…
npm install webpack-dev-server -g
…the author instructs us to run the following command to launch the server:
webpack-dev-server --entry ./test.js --output-filename ./dist/main.js
The author then demonstrates that the server should be running on localhost:8080
However, when I open a web browser and attempt to access the server via this domain, I receive a white page with the text “Cannot GET /”
The following is output in the Command prompt window when I run the command:
C:UsersjuricOneDriveDocuments_AngularWorkspaceChapter_6_Webpack5_Using_devserver>webpack-dev-server --entry ./test.js --output-filename ./dist/main.js
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.84.104:8080/
<i> [webpack-dev-server] Content not from webpack is served from 'C:UsersjuricOneDriveDocuments_AngularWorkspaceChapter_6_Webpack5_Using_devserverpublic' directory
asset ./dist/main.js 122 KiB [emitted] [minimized] (name: main) 1 related asset
orphan modules 31.9 KiB [orphan] 14 modules
runtime modules 27.2 KiB 12 modules
cacheable modules 177 KiB
modules by path ../../../../../AppData/Roaming/npm/node_modules/webpack-dev-server/node_modules/ 105 KiB
modules by path ../../../../../AppData/Roaming/npm/node_modules/webpack-dev-server/node_modules/...(truncated) 5.3 KiB 4 modules
modules by path ../../../../../AppData/Roaming/npm/node_modules/webpack-dev-server/node_modules/...(truncated) 81.3 KiB 4 modules
../../../../../AppData/Roaming/npm/node_modules/webpack-dev-server/node_modules/...(truncated) 4.16 KiB [built] [code generated]
../../../../../AppData/Roaming/npm/node_modules/webpack-dev-server/node_modules/...(truncated) 14.5 KiB [built] [code generated]
modules by path ../../../../../AppData/Roaming/npm/node_modules/webpack-dev-server/client/ 71.8 KiB
../../../../../AppData/Roaming/npm/node_modules/webpack-dev-server/client/index....(truncated) 42.4 KiB [built] [code generated]
../../../../../AppData/Roaming/npm/node_modules/webpack-dev-server/clien...(truncated) 1.15 KiB [built] [code generated]
../../../../../AppData/Roaming/npm/node_modules/webpack-dev-server/client/client...(truncated) 2.22 KiB [built] [code generated]
../../../../../AppData/Roaming/npm/node_modules/webpack-dev-server/client/module...(truncated) 26 KiB [built] [code generated]
./test.js + 2 modules 392 bytes [built] [code generated]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
webpack 5.83.1 compiled with 1 warning in 1554 ms
When I pull open the web browser Console in Google Chrome, I do notice the following messages:
Failed to load resource: the server responded with a status of 404 (Not Found)
DevTools failed to load source map: Could not load content for chrome-extension://ehkepjiconegkhpodgoaeamnpckdbblp/content.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
And when I pull open the web browser Console in Microsoft Edge, I see the following messages:
POST https://api-js.mixpanel.com/track/?verbose=1&ip=1&_=1684537407444 net::ERR_BLOCKED_BY_CLIENT
GET https://api-js.mixpanel.com/decide/?verbose=1&version=3&lib=web&token=7dad82d18ad96fda165e06987365580e&distinct_id=00034001CE2601AE&ip=1&_=1684537408134 net::ERR_BLOCKED_BY_CLIENT
POST https://api-js.mixpanel.com/engage/?verbose=1&ip=1&_=1684537408026 net::ERR_BLOCKED_BY_CLIENT
GET https://api-js.mixpanel.com/decide/?verbose=1&version=1&lib=web&token=7dad82d18ad96fda165e06987365580e&ip=1&_=1684537408033 net::ERR_BLOCKED_BY_CLIENT
GET https://api-js.mixpanel.com/decide/?verbose=1&version=3&lib=web&token=7dad82d18ad96fda165e06987365580e&distinct_id=00034001CE2601AE&ip=1&_=1684537408514 net::ERR_BLOCKED_BY_CLIENT
GET https://api-js.mixpanel.com/decide/?verbose=1&version=1&lib=web&token=7dad82d18ad96fda165e06987365580e&ip=1&_=1684537408387 net::ERR_BLOCKED_BY_CLIENT