Webpack和AngularJS

Question

Webpack和AngularJS

11

我想运行一个使用AngularJS和Webpack的简单应用程序，这是我的代码：
index.html

<html ng-app="myApp">
    <head>
        <meta charset="utf-8">
    </head>
    <body ng-controller="mainCtrl">

Full Name: {{firstName + " " + lastName}}

        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

app.js

var app = angular.module('myApp', []);

function mainCtrl($scope) {
    $scope.firstName="John",
    $scope.lastName="Doe"
}

Webpackconfig.js

module.exports = {
  entry: './main.js',
  output: {
    filename: './bundle.js'       
  }
};

main.js

var jquery = require("//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js");
var angular = require("//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js");


var app = require("./app.js");

bundle.js

?? I don't know what i sholud write here !!

我看到了这个：https://github.com/jeffling/angular-webpack-example
问题是如何正确地运行它？

- user3856699

如果你需要帮助，只需在项目中提出问题，我会尽力帮忙！ - Jeff Ling

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zan RAKOTO · Accepted Answer

bundle.js 是由webpack生成的，因此我认为您不需要编写此文件。

Webpack配置文件的正确名称是webpack.config.js。有了此文件，您就可以使用webpack或webpack --watch启动编译，随着代码的修改，您的捆绑文件将持续进行编译。

我创建了一个angular-index.js来将Angular封装为CommonJS模块。以下是源代码：

require('./angular.min.js');
module.exports = angular;

我已将main.js和'app.js'合并为一个单独的文件。

var jquery = require('jquery');
var angular = require('./angular-index');

var myApp = angular.module('myApp', []);
myApp.controller('mainCtrl', require('./mainCtrl'));

最后，我添加了mainCtrl.js。这个文件仅包含控制器函数的定义。

module.exports = function($scope) {
  $scope.firstName = 'John';
  $scope.lastName = 'Doe';
};

如需更好、更详细的解释，请阅读此博客文章：https://blog.codecentric.de/en/2014/08/angularjs-browserify/。我的工作代码在这里：https://github.com/jean-rakotozafy/angular-webpack-template