我正在尝试使用es6开发角度1.6。语法并在此article的帮助下使用web pack和yarn，当执行yarn run start时，webpack已成功编译，但在浏览器中打开localhost:8080/时，无法获取/
这是相关代码
const path = require('path');
const BUILD_DIR = path.resolve(__dirname, 'public');
const APP_DIR = path.resolve(__dirname, 'src');
const config = {
context : __dirname,
entry: APP_DIR + '/app/app.js',
output: {
path: BUILD_DIR ,
filename: "bundle.js",
publicPath: '/'
},
devtool : 'cheap-module-inline-source-map',
devServer: {
inline: true,
historyApiFallback: true,
hot: true,
contentBase: "./public"
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: { presets: ['env'] }
},
{ test: /\.html$/, loader: "html" },
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.inline.svg$/,
loader: 'babel-loader!svg-react-loader'
},
{
test: /\.jpe?g$|\.gif$|\.png$|^(?!.*\.inline\.svg$).*\.svg$/,
loader: 'url-loader'
},
{
test: /\.(woff2?|eot|ttf)$/i,
loader: 'url-loader'
}
]
},
resolve: {
extensions: [ '.html', '.js', '.json', '.css', '.less']
}
};
module.exports = config;
{
"name": "es6angular",
"version": "0.0.0",
"description": "Es6 System",
"dependencies": {
"angular": "^1.6.7",
"angular-animate": "^1.6.7",
"angular-aria": "^1.6.7",
"angular-bootstrap": "^0.12.2",
"angular-chart.js": "^1.1.1",
"angular-messages": "^1.6.7",
"angular-resource": "^1.6.7",
"angular-sanitize": "^1.6.7",
"angular-toastr": "^2.1.1",
"angular-ui-router": "^0.4.3",
"angular-ui-sortable": "^0.18.0",
"angular-ui-validate": "^1.2.3",
"bootstrap": "^3.3.7",
"fontawesome": "^4.7.2",
"gulp": "^3.9.1",
"international-phone-number": "^0.0.11",
"intl-tel-input": "^12.1.6",
"jquery": "^3.2.1",
"moment": "^2.19.4",
"ng-table": "^3.0.1",
"ngstorage": "^0.3.11",
"roboto-fontface": "^0.8.0"
},
"scripts": {
"start": "webpack-dev-server --hot"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-env": "^2.4.1",
"babel-eslint": "^8.0.3",
"babel-loader": "^7.1.2",
"babel-preset-minify": "^0.2.0",
"css-loader": "^0.28.7",
"eslint": "^4.13.1",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-plugin-angular": "^3.1.1",
"eslint-plugin-html": "^4.0.1",
"eslint-plugin-import": "^2.8.0",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.30.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"path": "^0.12.7",
"style-loader": "^0.19.1",
"svg-inline-loader": "^0.8.0",
"url-loader": "^0.6.2",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
},
"engines": {
"node": ">=0.10.0"
}
}
'use strict';
import 'bootstrap/dist/css/bootstrap.css';
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import ngMessages from 'angular-messages';
import uiBootstrap from 'angular-bootstrap';
import routing from './app.config';
import home from './home';
angular
.module('app', [ngMessages, uiRouter, uiBootstrap, home])
.config(routing);
<!doctype html>
<html ng-app="app" lang="en">
<head>
<meta charset="utf-8">
<title>Angular ES6</title>
<meta name="description" content="Application Manager">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body class="top-navigation" >
<ui-view></ui-view>
<script src="bundle.js"></script>
</body>
</html>
routing.$inject = ['$urlRouterProvider', '$locationProvider'];
export default function routing($urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
}
export default class HomeController {
constructor() {
this.name = 'World';
}
changeName() {
this.name = 'angular-tips';
}
}
routes.$inject = ['$stateProvider'];
export default function routes($stateProvider) {
$stateProvider
.state('home', {
url: '/',
templateURL: './home.html',
controller: 'HomeController',
controllerAs: 'home'
});
}
<div class="jumbotron">
<h1>Hello, {{home.name}}</h1>
</div>
<button class="btn btn-primary" ng-click="home.changeName()">Change</button>
import angular from 'angular';
import uirouter from 'angular-ui-router';
import routing from './home.route';
import HomeController from './home.controller';
export default angular.module('app.home', [uirouter])
.config(routing)
.controller('HomeController', HomeController).name;
其他文件可以在此URL中找到，虽然此文件未运行但只包含代码
这有什么问题？
以下是yarn run start登录终端
warning package.json: No license field
$ webpack-dev-server --hot
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./public
404s will fallback to /index.html
Hash: b429c9fda4e99e95ee12
Version: webpack 3.10.0
Time: 2243ms
Asset Size Chunks Chunk Names
bundle.js 6.16 MB 0 [emitted] [big] main
[0] (webpack)/hot/log.js 1.04 kB {0} [built]
[4] (webpack)/hot/emitter.js 77 bytes {0} [built]
[7] ./node_modules/angular-ui-router/release/angular-ui-router.js 175 kB {0} [built]
[8] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/app/app.js 52 bytes {0} [built]
[9] (webpack)-dev-server/client?http://localhost:8080 7.95 kB {0} [built]
[10] ./node_modules/url/url.js 23.3 kB {0} [built]
[17] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[19] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
[20] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
[22] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
[29] (webpack)/hot/dev-server.js 1.61 kB {0} [built]
[31] ./src/app/app.js 921 bytes {0} [built]
[41] ./node_modules/angular-messages/index.js 62 bytes {0} [built]
[43] ./node_modules/angular-bootstrap/ui-bootstrap-tpls.js 143 kB {0} [built]
[45] ./src/app/home/index.js 657 bytes {0} [built]
+ 33 hidden modules
webpack: Compiled successfully.