CODEWITHSUNDEEP
angularjswebpack
B B
B B

Reputation: 839

Webpack/Babel/Angular - bundle.js 404 (Not Found)

I'm having some trouble getting my bundle file to load in my html. Each time it returns 404. I have checked, and the Bundle is building fine.

package.json:

{
  "name": "MyApp",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "bundle": "webpack"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "dependencies": {
    "angular": "^1.5.8",
    "angular-jwt": "^0.1.7",
    "angular-resource": "^1.5.8",
    "angular-ui-router": "^0.3.1",
    "bcrypt": "^0.8.7",
    "cookie-parser": "^1.4.3",
    "cors": "^2.8.1",
    "debug": "^2.2.0",
    "express": "^4.14.0",
    "gulp": "^3.9.1",
    "json-loader": "^0.5.4",
    "jsonwebtoken": "^7.1.9",
    "main-bower-files": "^2.13.1",
    "mongoose": "^4.6.3",
    "morgan": "^1.7.0",
    "node-schedule": "^1.2.0",
    "nodemailer": "^2.6.4",
    "request-promise": "^4.1.1",
    "run-sequence": "^1.2.2",
    "sass": "^0.5.0",
    "satellizer": "^0.15.5"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-angular": "0.0.5",
    "babel-core": "^6.18.0",
    "babel-loader": "^6.2.5",
    "babel-preset-angular": "^6.0.15",
    "babel-preset-es2015": "^6.18.0",
    "chai": "^3.5.0",
    "chai-http": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-clean-css": "^2.0.13",
    "gulp-concat": "^2.6.0",
    "gulp-filter": "^4.0.0",
    "gulp-livereload": "^3.8.1",
    "gulp-nodemon": "^2.2.1",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-replace": "^0.5.4",
    "gulp-sass": "^2.3.2",
    "gulp-uglify": "^2.0.0",
    "mocha": "^3.1.2",
    "node-sass": "^3.10.1",
    "sass-loader": "^4.0.2",
    "webpack": "^1.13.2",
    "webpack-node-externals": "^1.5.4"
  }
}

.babelrc:

{
  "presets": [
    'es2015', 'angular', 'stage-0'
  ]
}

webpack.config.js:

var webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');

module.exports = {
  target: 'node',
  externals: [nodeExternals()],
  entry: './app.js',
  output: {
    path: __dirname + '/app',
    filename: './bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: '/(node_modules)/',
        loader: 'babel'
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      }
    ]
  }
}

index.html head:

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
  <title>MyApp</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">

  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/app.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway:400,600" rel="stylesheet">

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-resource.min.js"></script>

  <script src="//npmcdn.com/angular-ui-router/release/angular-ui-router.min.js"></script>

  <script src="//cdn.jsdelivr.net/satellizer/0.13.1/satellizer.min.js"></script>

  <script src="https://cdn.rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script>

  <script src="/js/app.js"></script>

  <script src="bundle.js"></script>

Any help much appreciated.

Upvotes: 0

Views: 1447

Answers (1)

Gabriel Kunkel
Gabriel Kunkel

Reputation: 2761

Try changing output in the webpack config file:

var webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');
var here = require('path-here'); // <- Add path-here


module.exports = {
  target: 'node',
  externals: [nodeExternals()],
  entry: './app.js',
  output: {
    path: here('dist'), // <- changed to this
    filename: 'bundle.js' // <- changed to this
},
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: '/(node_modules)/',
        loader: 'babel'
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      }
    ]
  }
}

Let me know if this helps.

Upvotes: 1

Related Questions