如何使用html页面配置NPM,webpack,angularjs

时间:2017-06-05 21:05:48

标签: angularjs node.js webpack

我正在玩npm和webpack和angular。我不确定它是否可行,但鉴于有可用于角度的节点包,我假设是这样。

我开始设置packages.json并添加了webpack。我设置我的package.json以启动webpack-dev-server,如下所示。

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: [

    ]
  }
};

当我运行命令时:

npm start

我看到以下内容,包括这些错误:

> 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.

有趣的是,即使我有错误,网络服务器也可以加载我的页面。我认为这是因为该页面被称为index.html,这是要服务的默认页面。

如何正确配置npm,webpack以html页面开头?或者这是错误的方法吗?还有另一种方法可以在不启动html页面的情况下启动角度项目吗?

谢谢 马特

0 个答案:

没有答案