你如何一起使用Webpack和AngularJS,以及模板加载和按需提取资源如何?
为此目的编写良好的 webpack.config.js
文件的一个例子将非常感谢 .
此处显示的所有代码段都可以在this github repo访问 . 代码已经从this packetloop git repo慷慨改编 .
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;
然后在_481518中使用它,就像这样,
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非常棒,但缺少文档和样本正在扼杀它 .
2 回答
您可以在需要的所有模块(文件)中要求角度 . 我有一个github repository示例如何做到这一点(也使用webpack进行构建) . 在示例中使用ES6导入语法,但无关紧要,您可以使用标准
require()
.例:
我开始
Angular + Flux
与Webpack
所以我可以帮助你做一些事情 .基本上我用
NPM
安装所有东西,它有module export
系统,所以它没有任何作用 . (您可以使用export-loader
,但如果您不需要,可以使用 . )我的 webpack.config.js 看起来像这样:
我的 main.js 看起来像这样:
和 index.coffee 包含主角度模块: