What is the best practice for importing angles using webpack?

Question

How do you use Webpack and AngularJS together, and what about loading a template and fetching on demand?

An example of a well-written webpack.config.js file for this purpose would be greatly appreciated.

All the code snippets listed here can be obtained at github repo . The code has been generously adapted from 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; 

To import AngularJS into the main app.js , you do the following:

application / provider / angular.js

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

And then use it in app.js for example

app.js

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

Is the following correct? Is there an easier way to do this? I saw several (not by any standards) messages that indicated a different method.

From this comment for reddit

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

There is another plugin that is under development right now, stackfull / angular-seed . It seems to be in the right direction, but in fact it is very difficult to use right now.

Webpack is awesome, but the lack of documentation and samples kills it.

Answer 1

You can simply require angular in all modules (files) where necessary. I have a github repository with an example of how to do this (also using webpack for build). The example uses ES6 import syntax, but it does not matter, you can use standard require() instead.

Example:

 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

I am starting with Angular + Flux with Webpack , maybe I can help you with some things.

Basically I install everything using NPM , it has a module export system, so it works like nothing. (You can use export-loader , but why, if you don't need it.)

My webpack.config.js looks like this:

 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; 

My main.js looks like this:

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

And index.coffee contains the main angular module:

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