Webpack 和 angularJs答案

【问题标题】：Webpack and angularJsWebpack 和 angularJs
【发布时间】：2015-02-13 11:18:25
【问题描述】：

我正在尝试使用 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
问题是我怎样才能正确运行它？

【问题讨论】：

如果您需要帮助，请在项目中提出问题，我会尽力而为！

标签： javascript angularjs webpack

【解决方案1】：

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

【讨论】：

您可以输入npm start编译并观察并在其他控制台运行http-server（sudo npm install -g http-server，如果尚未安装）来运行应用程序。
问这个问题：我为什么要使用命令行来运行它？
thx maaaan，我已经运行了，如果你不介意还有一个问题：我正在处理 .net 和 angular 项目，现在我们要添加 webpack。我如何在没有 npm 的情况下运行你的 github 项目？
你可以在package.json的scripts/start部分找到npm start执行的命令。所以你可以只做webpack --progress --colors --watch 而不是npm start。
对不起:)。我在回复中提到的博文使用 gulp：github.com/basti1302/angular-browserify。也许，他们的示例更适合您的用例。