egghead.io webpack角度チュートリアル

Question

私はegghead.ioのwebpack-angularチュートリアルに問題があります。私はステップ3「バベルとのES6」に入っています。

私はそれを解決したいので、あなたの助けが必要です。

私はあなたのチュートリアルを以下だし、私は、この段階で凍結しています：これは、私はエラーを得たメッセージクローム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！' ...............

{ 
    "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" 
    } 
} 

：これはpackage.jsonファイルです.........

を

が表示されません。

これは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 /ホーム/パブロ/ドキュメント/ tutoriales/WebPACKの ノードnode_modules/.binファイル/ WebPACKの-devのサーバー--contentベースを開始webpack-angular@1.0.0

を開始 発電機をt deoptimisedたコード：アプリ

http://localhost:8080/webpack-dev-server/ WebPACKの結果は、/コンテンツが から提供しています/ホーム/パブロ/ドキュメント/ tutoriales/WebPACKの/アプリ[BABEL]ノートから を提供しています彼のスタイルは "/home/pablo/Documents/tutoriales/webpack/node_modules/angular/angular.js" で、最大値は "500KB"を超えています。ハッシュ：69ba24ec3148fc14b2e7バージョン： webpack 2.2.1時間：3976ms 資産サイズチャンクスチャンク名bundle.js 1.11 MB 0 [発行] [大きい]メインチャンク{0} bundle.js（main）1.1 MB [エントリ] [レンダリング] [0] ./app/directives/index.js 69バイト{0} [組み込み] [1] ./~/angular/index.js 47バイト{0} [組み込み] [2] ./app/ディレクティブ/ kcd-hello.js 391バイト{0} [組み込み] [3] ./~/angular/angular.js 1.1 MB {0} [組み込み] [4] ./app/index.js 114バイト{ 0} [ビルド] webpack：バンドルは現在有効です。

主な問題は、「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

あなたのアプリケーションにバーベルを正しく挿入しましたか？場合によっては、ノードモジュール名が正しく解決されない場合があります。必要なES6コンポーネントがすべてそろっているようです。