javascript Webpack 和 angularJs
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27482725/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack and angularJs
提问by
I'm trying to run simple app with angularjs and webpack , here is my code :
index.html
我正在尝试使用 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
应用程序.js
var app = angular.module('myApp', []);
function mainCtrl($scope) {
$scope.firstName="John",
$scope.lastName="Doe"
}
Webpackconfig.js
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
包.js
?? I don't know what i sholud write here !!
also i've seen this : https://github.com/jeffling/angular-webpack-example
the question is how can i run this correctly ?
我也看过这个：https: //github.com/jeffling/angular-webpack-example
问题是我如何正确运行它？
采纳答案by Zan RAKOTO
bundle.jsis generated by webpack so I think that you don't need to write this file.
bundle.js是由 webpack 生成的，所以我认为你不需要写这个文件。
The correct name for Webpack config file is webpack.config.js. With this file in place you can launch compilation with webpackor webpack --watchto continuously compile you bundle file as you modify your code.
Webpack 配置文件的正确名称是 webpack.config.js。有了这个文件，您可以在修改代码时启动编译webpack或webpack --watch连续编译您的捆绑文件。
I've create a angular-index.jsto wrap Angular as CommonJS module. Here is the source code :
我创建了一个angular-index.js将 Angular 包装为 CommonJS 模块的方法。这是源代码：
require('./angular.min.js');
module.exports = angular;
And I've merged main.jsand 'app.js' in one single file
我已经将main.js'app.js'合并到一个文件中
var jquery = require('jquery');
var angular = require('./angular-index');
var myApp = angular.module('myApp', []);
myApp.controller('mainCtrl', require('./mainCtrl'));
And finally, I've added mainCtrl.js. This one is just the function definition of the controller.
最后，我添加了mainCtrl.js. 这只是控制器的功能定义。
module.exports = function($scope) {
$scope.firstName = 'John';
$scope.lastName = 'Doe';
};
For better and detailed explication please read this blog post https://blog.codecentric.de/en/2014/08/angularjs-browserify/. My working code is here https://github.com/jean-rakotozafy/angular-webpack-template
为了更好和详细的解释，请阅读这篇博客文章https://blog.codecentric.de/en/2014/08/angularjs-browserify/。我的工作代码在这里https://github.com/jean-rakotozafy/angular-webpack-template
