It drove me crazy, so hopefully it helps a little ... basically, I ended up importing everything through NPM as I could, and then manually otherwise. See this site for some specifications about which modules are needed:
http://datatables.net/download/npm
After working with it, it seems that the style of Webpack / ES6 / bundling does not match the parameters, for example, how the React code (or, possibly, Angular 2) works.
At first, this code was based on the NG6 starter, Angular / Webpack / ES6. Here is the app.js file ... slightly trimmed:
import angular from 'angular'; import 'angular-flot'; import 'angular-datatables'; import 'angular-breadcrumb'; import 'angular-sweetalert'; import 'datatables.net-bs'; import 'flot'; import ngAnimate from 'angular-animate'; import ngCookies from 'angular-cookies'; import ngFileUpload from 'ng-file-upload'; import ngResource from 'angular-resource'; import ngSanitize from 'angular-sanitize'; import ngTouch from 'angular-touch'; import 'restangular'; import satellizer from 'satellizer'; import toastr from 'angular-toastr'; import uiBootstrap from 'angular-bootstrap-npm'; import uiRouter from 'angular-ui-router'; import 'angular-ui-router-title'; import 'api-check'; import './externals'; import Common from './common/common'; import Components from './components/components'; import component from './app.component'; import AppRun from './app.run'; import AppConfig from './app.config'; const nameNormalized = 'app'; angular .module(nameNormalized, [ 'angular-flot', 'datatables', 'datatables.bootstrap', 'datatables.buttons', 'formly', 'formlyBootstrap', 'ncy-angular-breadcrumb', ngAnimate, ngCookies, ngFileUpload, ngResource, ngSanitize, ngTouch, 'oitozero.ngSweetAlert', 'restangular', satellizer, toastr, uiBootstrap, 'ui.footable', uiRouter, 'ui.router.title', Common.name, Components.name ]) .config(AppConfig) .directive(nameNormalized, component()) .run(AppRun) ;
And here is the externals file that is imported above:
import 'script!../node_modules/api-check/dist/api-check.min.js'; import 'script!../node_modules/angular-formly/dist/formly.min.js'; import 'script!../node_modules/angular-formly-templates-bootstrap/dist/angular-formly-templates-bootstrap.min.js'; import 'imports?jQuery=jquery!../node_modules/metismenu/dist/metisMenu.min.js'; import 'imports?$=jquery!../bower_components/angular-footable/src/angular-footable.js'; import 'imports?$=jquery!../bower_components/angular-footable/src/angular-footable.js'; import 'imports?$=jquery!../bower_components/flot.tooltip/js/jquery.flot.tooltip.min.js'; import 'imports?$=jquery!../bower_components/jquery.flot.time.js/index.js'; import 'imports?$=jquery!./externals/jquery.ba-resize.js'; import 'imports?jQuery=jquery!./externals/jquery.flot.resize.js'; import 'imports?$=jquery!./externals/inspinia.js';
And here is the Webpack configuration ... it is not truncated, but perhaps this is preferable:
import autoprefixer from 'autoprefixer'; import ExtractTextPlugin from 'extract-text-webpack-plugin'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import CopyWebpackPlugin from 'copy-webpack-plugin'; import path from 'path'; import webpack from 'webpack'; import _ from 'lodash'; let plugins = [ new webpack.NoErrorsPlugin(), new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin(), new webpack.ProvidePlugin({ _: 'lodash', $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', 'window.$': 'jquery' }), new CopyWebpackPlugin([ {from: './assets/img/favicons', to: 'assets/img/favicons'} ]) ]; let cssMinimize = ''; let htmlMinify = {}; let extractStyles = false; if(process.env.NODE_ENV === 'production') { htmlMinify = { removeComments: true, collapseWhitespace: true, conservativeCollapse: true, preserveLineBreaks: false, keepClosingSlash: true }; cssMinimize = 'minimize'; } module.exports = o => ({ context: path.join(__dirname, '/src'), entry: {app: getEntry(o)}, eslint: {configFile: './.eslintrc'}, module: { loaders: [ { test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url?limit=1000000' }, { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot|xml|ico)$/, loader: 'file?name=[path][name].[ext]' }, {test: /\.json$/, loader: 'json'}, { test: /\.js$/, loader: 'ng-annotate!babel?presets[]=es2015,presets[]=stage-0', exclude: [/bower_components/, /node_modules/] }, { test: /\.js$/, loader: 'eslint', exclude: [/bower_components/, /node_modules/] }, { test: /\.styl$/, loader: getStyleLoader(_.merge({extra: '!stylus'}, o)) }, { test: /\.less$/, loader: getStyleLoader(_.merge({extra: '!less'}, o)) }, { test: /\.css$/, loader: getStyleLoader(_.merge({extra: ''}, o)) }, { test: /\.html$/, loader: 'ngtemplate?relativeTo=' + (path.resolve(__dirname, '/src')) + '/!html' } ] }, output: { path: path.join(__dirname, '/dist'), publicPath: '/', filename: '[name].js' }, plugins: getPlugins(o), postcss: [autoprefixer({browsers: ['last 2 versions']})] }); function getStyleLoader(o) { const ending = 'css?' + cssMinimize + '!postcss' + o.extra; if(o.watch) { return 'style!' + ending; } else { return ExtractTextPlugin.extract('style', ending); } } function getPlugins(o) { if(!o.watch) { plugins.push(new ExtractTextPlugin('[name].css')); } else { plugins.push(new webpack.HotModuleReplacementPlugin()); } plugins.push(new HtmlWebpackPlugin({ filename: 'index.html', hash: true, minify: htmlMinify, template: './src/index.html', title: 'oa', watch: o.watch })); return plugins; } function getEntry(o) { let entry = ['./app']; if(o.watch) { entry.push('webpack/hot/dev-server'); } return entry; }
Finally, package.json dependencies
"dependencies": { "angular": "~1.4.7", "angular-animate": "~1.4.7", "angular-bootstrap-npm": "^0.14.3", "angular-breadcrumb": "^0.4.1", "angular-cookies": "^1.4.8", "angular-datatables": "^0.5.2", "angular-flot": "0.0.15", "angular-formly": "^7.3.5", "angular-formly-templates-bootstrap": "^6.1.7", "angular-resource": "~1.4.7", "angular-route": "~1.4.7", "angular-sanitize": "^1.4.8", "angular-sweetalert": "^1.1.0", "angular-toastr": "^1.6.0", "angular-touch": "^1.4.8", "angular-ui-router": "~0.2.15", "angular-ui-router-title": "0.0.4", "angular-ui-sortable": "~0.13.4", "api-check": "^7.5.5", "autoprefixer": "^6.1.0", "babel-core": "^6.1.21", "babel-eslint": "^4.1.5", "babel-loader": "^6.2.0", "babel-preset-es2015": "^6.1.18", "babel-preset-stage-0": "^6.1.18", "bootstrap": "^3.3.6", "bower": "^1.7.1", "copy-webpack-plugin": "^0.3.3", "css-loader": "^0.22.0", "datatables.net": "^1.10.10", "datatables.net-bs": "^1.10.10", "datatables.net-buttons": "^1.1.0", "datatables.net-buttons-bs": "^1.1.0", "drmonty-datatables-responsive": "^1.0.6", "eslint": "^1.9.0", "eslint-loader": "^1.1.1", "extract-text-webpack-plugin": "^0.9.1", "file-loader": "^0.8.5", "flot": "^0.8.0-alpha", "gulp": "^3.9.0", "gulp-rename": "^1.2.2", "gulp-template": "^3.1.0", "gulp-util": "^3.0.7", "html-loader": "^0.4.0", "html-webpack-plugin": "^1.7.0", "imports-loader": "^0.6.5", "jquery": "^2.1.4", "json-loader": "^0.5.4", "less": "^2.5.3", "less-loader": "^2.2.2", "loader-utils": "^0.2.12", "lodash": "^3.10.1", "metismenu": "^2.2.0", "ng-annotate-loader": "0.0.10", "ng-file-upload": "^10.1.5", "ngtemplate-loader": "^1.3.1", "path": "^0.12.7", "postcss-loader": "^0.8.0", "raw-loader": "^0.5.1", "restangular": "^1.5.1", "satellizer": "^0.13.1", "script-loader": "^0.6.1", "source-map": "^0.5.3", "style-loader": "^0.13.0", "stylus-loader": "^1.4.2", "url-loader": "^0.5.7", "webpack": "^1.12.6", "webpack-dev-server": "^1.12.1", "yargs": "^3.30.0" }