Monday 5 June 2017

how do I configure NPM, webpack, angularjs with html page

I'm playing around with npm and webpack and angular. I'm not sure its possible but given there are node packages available for angular, I assume so.

I've started with setting up packages.json and added webpack. I setup my package.json to start webpack-dev-server as follows.

package.json:
{
  "name": "ang",
  "version": "1.0.0",
  "description": "project using Angular and npm",
  "main": "index.js",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --progress --inline --port 8088"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

webpack.config.js
module.exports = {
  entry: 'index.html',
  externals: {    
  },
  output: {
    path: __dirname,
    filename: 'bundle.html'
  },
  module: {
    loaders: [

    ]
  }
};

when I run the command:

npm start

I see the following, including these errors:

> ang@1.0.0 start d:\projects\html\ang
> webpack-dev-server --progress --inline --port 8088

 10% building modules 1/1 modules 0 active
Project is running at http://localhost:8088/
webpack output is served from /
Hash: 24d485d9f8470b709e52
Version: webpack 2.6.1
Time: 953ms
      Asset    Size  Chunks                    Chunk Names
bundle.html  314 kB       0  [emitted]  [big]  main
chunk    {0} bundle.html (main) 300 kB [entry] [rendered]
   [35] (webpack)-dev-server/client?http://localhost:8088 5.68 kB {0} [built]
   [36] ./~/ansi-html/index.js 4.26 kB {0} [built]
   [37] ./~/ansi-regex/index.js 135 bytes {0} [built]
   [39] ./~/events/events.js 8.33 kB {0} [built]
   [40] ./~/html-entities/index.js 231 bytes {0} [built]
   [44] ./~/punycode/punycode.js 14.7 kB {0} [built]
   [47] ./~/querystring-es3/index.js 127 bytes {0} [built]
   [49] ./~/sockjs-client/lib/entry.js 244 bytes {0} [built]
   [75] ./~/strip-ansi/index.js 161 bytes {0} [built]
   [77] ./~/url/url.js 23.3 kB {0} [built]
   [78] ./~/url/util.js 314 bytes {0} [built]
   [79] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
   [80] (webpack)-dev-server/client/socket.js 897 bytes {0} [built]
   [82] (webpack)/hot/emitter.js 77 bytes {0} [built]
   [83] multi (webpack)-dev-server/client?http://localhost:8088 index.html 40 bytes {0} [built]
     + 69 hidden modules

ERROR in multi (webpack)-dev-server/client?http://localhost:8088 index.html
Module not found: Error: Can't resolve 'index.html' in 'd:\projects\html\ang'
 @ multi (webpack)-dev-server/client?http://localhost:8088 index.html
webpack: Failed to compile.

What is interesting, even though I have errors, the webserver allows my page to load. I assume that's because the page is called index.html and thats the default page to serve.

How do I properly configure npm, webpack to start with html page? Or is that wrong approach all together? Is there another way to start an angular project without starting html page?

Thank you Matt



via tatmanblue

No comments:

Post a Comment