Quelle est la meilleure pratique pour l'importation d'angularjs à l'aide de webpack?

Comment utilisez-vous Webpack et AngularJS ensemble, et comment, sur le modèle de chargement et sur la demande d'extraction de ressources?

Un exemple d'un bien écrit webpack.config.js fichier serait très apprécié.

Tous les extraits de code affiché ici peut être consulté à l' ce dépôt github. Le Code a été généreusement adapté de cette packetloop repo 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;

À l'importation AngularJS dans les principaux app.js vous effectuez les opérations suivantes:

app/vendor/angular.js

'use strict';

if (!global.window.angular) {
  require('bower/angular/angular');
}
var angular = global.window.angular;
module.exports = angular;

Et ensuite l'utiliser dans app.js comme,

app.js

...
var angular = require('vendor/angular');

//Declare app level module
var app = angular.module('myApp', []);

...

Est la suivante correct? Est-il un moyen plus facile de faire cela? J'ai vu un peu (pas beaucoup par toutes les normes) postes énumérés une autre méthode.

De cette reddit poster un commentaire

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

Il y a aussi un autre plugin qui est en cours de développement, à stackfull/angulaire de la graine. Il semble être dans la bonne direction, mais il est vraiment vraiment dur à utiliser dès maintenant.

Webpack est génial, mais le manque de documentation et les échantillons sont de le tuer.

  • Angulaire lui-même fonctionne parfaitement hors de la boîte avec webpack - var angular = require('angular'). Vous pouvez également besoin de vos modules avec le name propriété sur chaque module - var myModule = require('./myModule'); angular.module('foo', [myModule.name]). Il y a quelques exceptions près, l'interface utilisateur du routeur notable pour ne pas exporter le module objet, mais le nom du module lui-même.
  • Cela peut également être un bon endroit pour commencer. Il m'a aidé. tête d'oeuf.io/cours/angularjs-angulaire-à-webpack-introduction
  • angulaire de ne pas travailler hors de la boîte avec la syntaxe: var angulaire = require('angulaire') sans votre app/vendor/angular.js. Si vous utilisez des exportations du chargeur et de l'utilisation angulaire, vous pouvez le faire fonctionner sans votre vendor/angular.js. Notez également que vos dépendances doivent être mnp dépendances. Bower dépendances ne fonctionnera pas avec les exportations du chargeur.
InformationsquelleAutor Jibi Abraham | 2015-02-21