什么是使用webpack导入angularjs的最佳做法？

你怎么一起使用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请执行以下操作：

应用程序/供应商/ 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', []); ... 

以下是否正确？ 有没有更简单的方法来做到这一点？ 我已经看到了一些（没有任何标准很多）职位列出另一种方法。

从这个reddit发表评论

 // Add to webpack.config.js#module#loaders array { test: /[\/]angular\.js$/, loader: "exports?angular" } 

另外还有一个插件正在开发中，在stackfull / angular-seed 。 这似乎是在正确的方向，但现在真的很难使用。

Webpack是非常棒的，但缺乏文档和示例正在杀死它。

Answer 1

您可以在需要的所有模块（文件）中只需要angular度。 我有一个github存储库与示例如何做到这一点（也使用webpack进行构build）。 在示例中使用了ES6导入语法，但它不重要，您可以使用标准的require()来代替。

例：

 import 'bootstrap/dist/css/bootstrap.min.css'; import './app.css'; import bootstrap from 'bootstrap'; import angular from 'angular'; import uirouter from 'angular-ui-router'; import { routing} from './app.config'; import common from './common/common.module'; import featureA from './feature-a/feature-a.module'; import featureB from './feature-b/feature-b.module'; const app = angular .module('app', [uirouter, common, featureA, featureB]) .config(routing); 

Answer 2

我从Webpack开始使用Angular + Flux ，所以可能我可以帮助你一些事情。

基本上我用NPM安装一切，它有module export系统，所以它没有任何工作。 （你可以使用export-loader ，但是为什么你不需要。）

我的webpack.config.js看起来像这样：

 var webpack = require('webpack'); var path = require('path'); var HtmlWebpackPlugin = require("html-webpack-plugin"); var nodeModulesDir = path.resolve(__dirname, './node_modules'); // Some of my dependencies that I want // to skip from building in DEV environment var deps = [ 'angular/angular.min.js', ... ]; var config = { context: path.resolve(__dirname, './app'), entry: ['webpack/hot/dev-server', './main.js'], resolve: { alias: {} }, output: { path: path.resolve(__dirname, './build'), filename: 'bundle.js' }, // This one I am using to define test dependencies // directly in the modules plugins: [ new webpack.DefinePlugin({ ON_TEST: process.env.NODE_ENV === 'test' }) ], module: { preLoaders: [ {test: /\.coffee$/, loader: "coffeelint", exclude: [nodeModulesDir]} ], loaders: [ {test: /\.js$/, loader: 'ng-annotate', exclude: [nodeModulesDir]}, {test: /\.coffee$/, loader: 'coffee', exclude: [nodeModulesDir]}, ... ], noParse: [] }, devtool: 'source-map' }; if (process.env.NODE_ENV === 'production') { config.entry = { app: path.resolve(__dirname, './app/main.js'), vendors: ['angular'] }; // config.output.path = path.resolve(__dirname, './dist'); config.output = { path: path.resolve(__dirname, "./dist"), filename: "app.[hash].js", hash: true }; config.plugins.push(new webpack.optimize.UglifyJsPlugin()); config.plugins.push(new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.[hash].js')); config.plugins.push(new HtmlWebpackPlugin({ title: 'myApp', template: path.resolve(__dirname, './app/index.html'), inject: 'body' })); delete config.devtool; } else { deps.forEach(function (dep) { var depPath = path.resolve(nodeModulesDir, dep); config.resolve.alias[dep.split(path.sep)[0]] = depPath; config.module.noParse.push(depPath); }); } module.exports = config; 

我的main.js看起来像这样：

 var angular = require('angular'); if(ON_TEST) { require('angular-mocks/angular-mocks'); } require('./index.coffee'); 

和index.coffee包含主angular模块：

 ngModule = angular.module 'myApp', [] require('./directive/example.coffee')(ngModule)