Webpack/Babel/Angular - bundle.js 404（未找到）

我在加載我的html文件時遇到了一些麻煩。每次它返回404.我已經檢查過，並且Bundle正在修復。Webpack/Babel/Angular - bundle.js 404（未找到）

的package.json：

{ 
    "name": "MyApp", 
    "version": "1.0.0", 
    "description": "", 
    "main": "app.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "bundle": "webpack" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "" 
    }, 
    "author": "", 
    "license": "ISC", 
    "bugs": { 
    "url": "" 
    }, 
    "homepage": "", 
    "dependencies": { 
    "angular": "^1.5.8", 
    "angular-jwt": "^0.1.7", 
    "angular-resource": "^1.5.8", 
    "angular-ui-router": "^0.3.1", 
    "bcrypt": "^0.8.7", 
    "cookie-parser": "^1.4.3", 
    "cors": "^2.8.1", 
    "debug": "^2.2.0", 
    "express": "^4.14.0", 
    "gulp": "^3.9.1", 
    "json-loader": "^0.5.4", 
    "jsonwebtoken": "^7.1.9", 
    "main-bower-files": "^2.13.1", 
    "mongoose": "^4.6.3", 
    "morgan": "^1.7.0", 
    "node-schedule": "^1.2.0", 
    "nodemailer": "^2.6.4", 
    "request-promise": "^4.1.1", 
    "run-sequence": "^1.2.2", 
    "sass": "^0.5.0", 
    "satellizer": "^0.15.5" 
    }, 
    "devDependencies": { 
    "babel": "^6.5.2", 
    "babel-angular": "0.0.5", 
    "babel-core": "^6.18.0", 
    "babel-loader": "^6.2.5", 
    "babel-preset-angular": "^6.0.15", 
    "babel-preset-es2015": "^6.18.0", 
    "chai": "^3.5.0", 
    "chai-http": "^3.0.0", 
    "gulp": "^3.9.1", 
    "gulp-clean-css": "^2.0.13", 
    "gulp-concat": "^2.6.0", 
    "gulp-filter": "^4.0.0", 
    "gulp-livereload": "^3.8.1", 
    "gulp-nodemon": "^2.2.1", 
    "gulp-notify": "^2.2.0", 
    "gulp-rename": "^1.2.2", 
    "gulp-replace": "^0.5.4", 
    "gulp-sass": "^2.3.2", 
    "gulp-uglify": "^2.0.0", 
    "mocha": "^3.1.2", 
    "node-sass": "^3.10.1", 
    "sass-loader": "^4.0.2", 
    "webpack": "^1.13.2", 
    "webpack-node-externals": "^1.5.4" 
    } 
}

.babelrc：

{ 
    "presets": [ 
    'es2015', 'angular', 'stage-0' 
    ] 
}

webpack.config.js：

var webpack = require('webpack'); 
var nodeExternals = require('webpack-node-externals'); 

module.exports = { 
    target: 'node', 
    externals: [nodeExternals()], 
    entry: './app.js', 
    output: { 
    path: __dirname + '/app', 
    filename: './bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: '/(node_modules)/', 
     loader: 'babel' 
     }, 
     { 
     test: /\.scss$/, 
     loader: 'style-loader!css-loader!sass-loader' 
     } 
    ] 
    } 
}

index.html的頭：

<!DOCTYPE html> 
<html ng-app="MyApp"> 
<head> 
    <title>MyApp</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta charset="utf-8"> 

    <link rel="stylesheet" href="./css/reset.css"> 
    <link rel="stylesheet" href="./css/app.css"> 
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,600" rel="stylesheet"> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-resource.min.js"></script> 

    <script src="//npmcdn.com/angular-ui-router/release/angular-ui-router.min.js"></script> 

    <script src="//cdn.jsdelivr.net/satellizer/0.13.1/satellizer.min.js"></script> 

    <script src="https://cdn.rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script> 

    <script src="/js/app.js"></script> 

    <script src="bundle.js"></script>

非常感謝任何幫助。

來源

2016-10-26 B B

嘗試在的WebPack配置文件改變輸出：

var webpack = require('webpack'); 
var nodeExternals = require('webpack-node-externals'); 
var here = require('path-here'); // <- Add path-here 


module.exports = { 
    target: 'node', 
    externals: [nodeExternals()], 
    entry: './app.js', 
    output: { 
    path: here('dist'), // <- changed to this 
    filename: 'bundle.js' // <- changed to this 
}, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: '/(node_modules)/', 
     loader: 'babel' 
     }, 
     { 
     test: /\.scss$/, 
     loader: 'style-loader!css-loader!sass-loader' 
     } 
    ] 
    } 
}

讓我知道，如果這有助於。

來源

2016-10-27 00:06:10

嗨加布裏埃爾，謝謝你的回答，但仍然沒有喜悅。 –

無賴。在我的故障排除中的這一點上，我會重新安裝東西，刪除吞噬（嘗試使用webpack）或放棄webpack的吞噬。根據我有限的經驗努力讓他們合作，Gulp和webpack才能相處融洽。 –

Webpack/Babel/Angular - bundle.js 404（未找到）

回答

相關問題