CODEWITHSUNDEEP
javascriptangularjsnode.jswebpack
colbisaurusrex
colbisaurusrex

Reputation: 105

Webpack builds and my server serves a blank page, no errors. What am I doing wrong?

Here is my current configuration and file structure. It successfully builds. There are no errors in my browser console. Just a blank page. I serve the dist folder. I installed all dependencies via npm. I had an initial error - angular is not defined - but I resolved that by installing the angular module. At the very least, it told me that server really is serving the dist folder.

My file structure

The html file in my dist folder

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Lightbox</title>
  </head>
  <body>
  <script type="text/javascript" src="bundle.js"></script></body>
</html>

My Webpack config

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, './client/js/app.js'),
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.(css|sass)$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader',
        query: { mimetype: 'image/png' },
      }
    ],
  },
  plugins: [new HtmlWebpackPlugin()],
};

And my package.json

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node node_modules/.bin/webpack-dev-server --content-base dist"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "dependencies": {
    "angular": "^1.6.4",
    "angular-route": "^1.6.4",
    "angular-utils-pagination": "^0.11.1",
    "css-loader": "^0.28.0",
    "express": "^4.15.2",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^4.5.2",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.1",
    "url-loader": "^0.5.8",
    "webpack": "^2.4.1"
  },
  "devDependencies": {
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^14.1.0",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.5"
  }
}

My server

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

app.listen(port)
app.use(express.static(path.join(__dirname, '../dist')));

Upvotes: 0

Views: 1132

Answers (1)

Gorka Hernandez
Gorka Hernandez

Reputation: 3968

Make sure you are properly bootstraping your Angular application by adding your ng-app directive to the index HTML file template as explained in the official HtmlWebpackPlugin documentation:

Upvotes: 1

Related Questions