Question

我在使用egghead.io的webpack-angular教程时遇到了问题。我在第3步“ES6 with Babel”。

我需要你的帮助，因为我想解决它。

我正在关注你的教程，我在这一步中冻结了：

这是Chrome devTool消息，我收到了错误

...........

bundle.js:17416 Uncaught TypeError: __webpack_require__(...) is not a function(anonymous function) @ bundle.js:17416__webpack_require__ @ bundle.js:20Object.defineProperty.value @ bundle.js:66(anonymous function) @ bundle.js:69
Navigated to http://localhost:8080/

指令'Hello webpack！'没有显示

.........

这是package.json文件：

{
  "name": "webpack-angular",
  "version": "1.0.0",
  "description": "Example of using webpack",
  "main": "app/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\"",
    "start": "node node_modules/.bin/webpack-dev-server --content-base app"
  },
  "keywords": [
    "webpack",
    "angular",
    "egghead.io"
  ],
  "author": "Pablo B.",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^1.16.2"
  }
}

................

这是webpack.config.js文件：

module.exports = {
  context: __dirname + '/app',
  entry:  './index.js',
  output:{
    path: __dirname + '/app',
    filename: 'bundle.js'
  },
  module:{
    loaders:[
      { test: /\.js$/, loader: 'babel-loader'}
    ]
  }
}

这是运行npm start命令后终端的结果。

webpack npm start

webpack-angular@1.0.0 start / home / pablo / Documents / tutoriales / webpack     node node_modules / .bin / webpack-dev-server --content-base app

     提供了
http://localhost:8080/webpack-dev-server/ webpack结果   来自/内容来自   / home / pablo / Documents / tutoriales / webpack / app [BABEL]注意：代码   发电机已经优化了造型   “/home/pablo/Documents/tutoriales/webpack/node_modules/angular/angular.js”   因为它超过了“500KB”的最大值。哈希：69ba24ec3148fc14b2e7版本：   webpack 2.2.1时间：3976ms       资产大小块块名称bundle.js 1.11 MB 0 [emit] [big]主块{0} bundle.js（main）1.1 MB [entry] [rendering]       [0] ./app/directives/index.js 69字节{0} [已建]       [1] ./~/angular/index.js 47字节{0} [已建]       [2] ./app/directives/kcd-hello.js 391字节{0} [已建]       [3] ./~/angular/angular.js 1.1 MB {0} [built]       [4] ./app/index.js 114字节{0} [built] webpack：bundle现在是有效的。

任何想法？

主要问题是显示指令“Hello Webpack！”。为什么我得到webpack需要出错？

提前致谢。

亲切的问候

Answer 1

我自己修好了。我改变了做到这一点的方式。

之前：

const angular = require('angular'); 
const ngModule = angular.module('app',[]); 
require('./directives')(ngModule);

后：

const angular = require('angular'); 
const ngModule = angular.module('app',[]);
require('./directives').default(ngModule);

Answer 2

您是否正确地将babel注入您的应用程序？有时这与节点模块名称无法正确解析有关。看起来您拥有所有必需的ES6组件。

egghead.io webpack angular tutorial

2 个答案: