如何将Webpack和AngularJS结合使用?如何处理模板加载和按需获取资源?
非常感谢提供一个针对此目的编写良好的webpack.config.js
文件的示例。
此处显示的所有代码片段都可在这个GitHub存储库中访问。代码已经大量改编自这个packetloop git存储库。
webpack.config.json
var path = require('path');
var ResolverPlugin = require("webpack/lib/ResolverPlugin");
var config = {
context: __dirname,
entry: ['webpack/hot/dev-server', './app/app.js'],
output: {
path: './build',
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.css$/,
loader: "style!css-loader"
}, {
test: /\.scss$/,
loader: "style!css!sass?outputStyle=expanded"
}, {
test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/,
loader: "file"
}, {
test: /\.html$/,
loader: "ngtemplate?relativeTo=" + path.join(__dirname, 'app/') + "!raw"
}]
},
// Let webpack know where the module folders are for bower and node_modules
// This lets you write things like - require('bower/<plugin>') anywhere in your code base
resolve: {
modulesDirectories: ['node_modules', 'lib/bower_components'],
alias: {
'npm': __dirname + '/node_modules',
'vendor': __dirname + '/app/vendor/',
'bower': __dirname + '/lib/bower_components'
}
},
plugins: [
// This is to help webpack know that it has to load the js file in bower.json#main
new ResolverPlugin(
new ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
)
]
};
module.exports = config;
将AngularJS导入到主app.js
中,您需要执行以下操作:
app/vendor/angular.js
'use strict';
if (!global.window.angular) {
require('bower/angular/angular');
}
var angular = global.window.angular;
module.exports = angular;
然后可以像这样在app.js
中使用它:
app.js
...
var angular = require('vendor/angular');
// Declare app level module
var app = angular.module('myApp', []);
...
以下内容是否正确?有没有更简单的方法?我看到过一些(并不是很多)列出了另一种方法的帖子。
// Add to webpack.config.js#module#loaders array
{
test: /[\/]angular\.js$/,
loader: "exports?angular"
}
目前还有另一个插件正在开发中,位于stackfull/angular-seed。它似乎朝着正确的方向发展,但目前使用起来非常困难。
Webpack非常棒,但缺乏文档和示例使其难以上手。
var angular = require('angular')
。您还可以通过每个模块上的name
属性来要求您的模块 -var myModule = require('./myModule'); angular.module('foo', [myModule.name])
。有一些例外情况 - ui router是一个显著的例子,它不导出模块对象,而是导出模块名称本身。 - Dan