Friday, 28 April 2017

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')));



via colbisaurusrex

No comments:

Post a Comment