What is the best practice for importing angularjs using webpack?
angularjs, javascript, webpack
Solution
You can just require angular in all modules (files) where you need it. I have a github repository with example how to do that (also using webpack for build). In the example ES6 import syntax is used but it shouldnt 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);
Problem
How do you use Webpack and AngularJS together, and how about template loading and on demand fetching of resources? An example of a well written `webpack.config.js` file for this purpose would be very much appreciated. All code snippets displayed here can be accessed at this github repo. 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: app/vendor/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` like so, 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've seen a few (not a lot by any standards) posts which listed another method. From this reddit post comment ``` // Add to webpack.config.js#module#loaders array { test: /[\/]angular\.js$/, loader: "exports?angular" } ``` There is also another plugin which is in development right now, at stackfull/angular-seed. It seems to be in the right direction, but is really really hard to use right now. Webpack is way awesome, but the lack of documentation and samples are killing it.