javascript - Webpack splitting code into separate modules included via npm, how to compile es6? -

i'm trying write system of modular components can dynamically loaded @ runtime webpack. example, when user switches tabs, code display content of new tab should load when user clicks on tab.

here of code accomplishes (quite nicely, might add):

onrender(){             this.observe("route", (route) => {             if(route.length>0){                 this.set("loading", true);                  this.get("pages."+route).loadcomponent((component) => {                     this.components.page = component.component;                     this.set("loading", false);                 });             }         });      },      data: {         pages: {             "#hello": {                 name: "hello",                 loadcomponent: (callback) => {                     require.ensure([], () => {                         callback(require("./page_component/hello/hello.js"));                     });                 }             },             "#world": {                 name: "world",                 loadcomponent: (callback) => {                     require.ensure([], () => {                         callback(require("./page_component/world/world.js"));                     });                 }             },             "#activity": {                 name: "individual activity",                 loadcomponent: (callback) => {                     require.ensure([], () => {                         callback(require("./page_component/individual_activity/assets/js/src/main.js"));                     });                 }             }         }      } 

i have gotten working fabulously, 1 caveat. i'm using es6, , babel-loader load it. modules containing functionality, templates, styles etc. tabs have directly contained within directory structure of app, (see: page_components directory):

├── assets │   ├── css │   ├── js │   │   ├── main.js │   │   └── page_components │   │       ├── hello │   │       ├── individual_activity │   │       └── world │   └── templates │       └── index.html ├── package.json └── webpack.config.js 

i prefer each page component own package, package.json, , included via example: require("individial_activity"), purposes of code organization.

the problem is, appears webpack doesn't run external modules (such modules included via node_modules) through loader, , such errors unexpected symbols when trying load es6 code.

i tried such things require("babel-loader!individual_activity") and, require("babel-loader!individual_activity/path/to/main.js") no avail.

is i'm trying not normal way of doing things? should keep code modules in same directory structure? doing blatantly wrong?

webpack.config.js:

var webpack = require("webpack");  module.exports = {     entry: ['./assets/js/main.js'],     output: {         path: './build',         filename: 'bundle.js'     },     module: {         loaders: [{                 test: /\.js$/,                 exclude: /node_modules/,                 loader: 'babel-loader'             },             {                 test: /\.css$/,                 exclude: /node_modules/,                 loader: "style-loader!css-loader"             }         ]     },     resolve: {         modulesdirectories: ['node_modules', 'bower_components'],     },     plugins: [         new webpack.optimize.uglifyjsplugin({             compress: {                 dead_code: true,                 conditionals: true,                 unsafe: false,                 warnings: false             },             mangle: false         }),         new webpack.contextreplacementplugin(/moment[\/\\]locale$/, /en.js/)     ] }; 

thanks!

it's nice idea keep concerns separate, think you'd going overkill making each section of app npm package. allow npm handle external dependancies , 1 off libraries, not highly dependent parts of application.

if looking cleaner require() statements, try adding js directories modulesdirectories config:

resolve: {     modulesdirectories: ['node_modules',                          'bower_components',                          'assets/js',                          'assets/js/page_components'], }, 

should allow require modules directly inside page_components without need path or extension, e.g. require('individual_activity')