egghead.io webpack角向教程

我有來自egghead.io的教程webpack-angular的問題。我正在步驟3「與巴貝爾的ES6」。egghead.io webpack角向教程

我需要你的幫助，因爲我想解決它。

我下面您的教程，我在這一步凍結：

這是消息的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啓動命令後的結果。

的WebPack NPM啓動

[email protected]開始/家庭/巴勃羅/文檔/ tutoriales /的WebPack 節點node_modules /的.bin /的WebPack-DEV-服務器--content基應用

http://localhost:8080/webpack-dev-server/的WebPack結果送達從/內容從供應/家庭/巴勃羅/文檔/ tutoriales /的WebPack /應用[BABEL]注意：代碼發生器已deoptimisedŧ他的造型爲「/home/pablo/Documents/tutoriales/webpack/node_modules/angular/angular.js」，因爲它超過了「500KB」的最大值。 Hash：69ba24ec3148fc14b2e7版本： webpack 2.2.1時間：3976ms 資產大小塊大塊名稱bundle.js 1.11 MB 0 [發射] [大]主塊{0} bundle.js（main）1.1 MB [entry] [rendered] [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：bundle現在有效。

任何想法？

主要問題是顯示指令「Hello Webpack！」。爲什麼我會收到webpack require錯誤？

在此先感謝。

親切的問候

來源

2017-02-01 Pablo Alaniz

我自己修復了。我改變了做這件事的方式。

前：

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);

來源

2017-02-02 01:45:40

您是否正確地將babel注入您的應用程序？有時這與節點模塊名稱不能正確解析有關。它看起來像你有所有必需的ES6組件。

來源

2017-02-01 21:13:12 user3236101

這是我在index.js使用巴貝爾的方式文件'出口默認ngModule => { 要求（」 ./ KCD你好'）（ngModule）; };'' –

= module.exports功能（ngModule）{ ngModule.directive（ 'kcdHello'，函數（）{ VAR指令= {}; directive.restrict = 'E'; directive.scope = { }; directive.templateUrl = 「指令/ KCD-hello.html的」， directive.controllerAs = 「VM」; directive.controller =函數（）{ VAR VM =此; vm.greeting =「你好的WebPack！「 } 返回指令; }） }' –

我應該改變這一切，我使用module.exports通過出口默認ngModule方式????該教程只是改變這個文件。 –

egghead.io webpack角向教程

回答

相關問題