egghead.io webpack angular 教程

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 [emitted] [big] main chunk {0} bundle.js (main) 1.1 MB [entry] [rendered] [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} [內置] [4] ./app/index.js 114 字節 {0} [內置] webpack：捆綁包現在有效。

任何的想法？

主要問題是顯示指令“Hello Webpack！”。 為什么我得到 webpack require 錯誤？

提前致謝。

親切的問候

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 組件。