Express not able to find webpack bundle

Question

I'm running an app with Node, Express.js, Webpack, and Handlebars. I've looked all around for the answer, but none have been helpful. Here is my file structure.

Handlebars (top folder)
    dist
        bundle.js
    node_modules
    routes
    src
        css
            input-elements.css
            main.css
        js
            app.js
            dom-loader.js
            server.js 
        index.html
    package.json
    package-lock.json
    webpack.config.js

I know Express is pulling from the right locations in my server.js file:

const hbs = require('express-handlebars');
const path = require('path');
const express = require('express');
const app = express();
const port = 8080;


app.set('port', port || 9001);
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, '../index.html'));
});    

app.use(express.static(path.resolve('dist')));

app.listen(app.get('port'), function () {
    console.log('Web server listening on port ' + app.get('port'));
});

Here is my webpack.config.js:

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: path.join(__dirname, './src/js/app.js'),
    output: {
        path: path.resolve('dist'),
        filename: 'bundle.js',
        publicPath: '/dist/'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
};

And my index.html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Webpack 2 Basics</title>
    <script type="text/javascript" src="../dist/bundle.js"></script>
</head>
<body>
    <h1>Let's learn Webpack 2</h1>
    <button id="secret-button">Show the Secret</button>
    <p id="secret-paragraph">You can't see this all the time</p>
</body>
</html>

Here is my package.json:

{
  "name": "handlebars",
  "version": "1.0.0",
  "description": "",
  "main": "./src/js/app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "concurrently \"webpack -p\" \"nodemon ./src/js/server.js --ext html,scss,css,js,json\""
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "concurrently": "^4.0.1",
    "css-loader": "^1.0.0",
    "express": "^4.16.3",
    "express-handlebars": "^3.0.0",
    "nodemon": "^1.18.4",
    "style-loader": "^0.23.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0"
  }
}

I can confirm Webpack is building the bundle. In the browser, it has two errors:

#1: Failed to load resource: the server responded with a status of 404 (not 
found) --> referring to bundle.js


#2: Refused to execute script from 'http://localhost:8080/dist/bundle.js' 
because its MIME type ('text/html') is not executable, and strict MIME type 
checking is enabled.

Express is sending my index.html file but it's not sending the bundle with it. I have app.use( bundle.js ) in my server.js file but it's not sending it for some reason. Is there something wrong with my pathing?

Is it due to the fact that I'm using absolute paths here instead of relative paths? If so, is the path module the best to be using here?

Any and all help would be appreciated.

Answer 1

The path in <script type="text/javascript" src="../dist/bundle.js"></script> is wrong.

As you can see in the error log of the browser it is to find the file /dist/bundle.js .

The reason for that is that you mount the content of dist to the root. So index.html and bundel.js are on the same lavel. As of that it has to be src="bundle.js"

You could also mount the content of dist to a subpath:

app.use('/js', express.static(path.resolve('dist')));

If you would do that then it would have to be src="/js/bundle.js"

The URLs in the html document have to match how you define the routes in express js and not how they are located in the file system.

Express not able to find webpack bundle

Question

1 answers

solution1
1 ACCPTED 2018-09-02 18:36:09

Express not able to find webpack bundle

Question

1 answers

solution1 1 ACCPTED 2018-09-02 18:36:09

solution1
1 ACCPTED 2018-09-02 18:36:09