What is the best practice for importing angularjs using webpack?

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);

I am starting with Angular + Flux with Webpack so may be I can help you with some things.

Basically I am installing everything with NPM, it has module export system, so it works like nothing. (You can use export-loader, but why if you do not need to.)

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 environmentvar 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 containt main angular module:

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