Webpack - Bundling - json

Question

I have following problem. My webpack is bundling files from node_modules. How can I prevent him from doing that? He is doing that, because i import files from node_modules in main.ts, but i have to do this. What am i doing wrong?
main.ts
import { NgModule } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app/app.component';
#NgModule({
imports: [ BrowserModule ],
exports: [],
declarations: [AppComponent],
providers: [],
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
webpack.config.json
var webpack = require('webpack');
module.exports = {
entry : __dirname + '/src/main.ts',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader'
}
]
},
resolve: {
extensions: ['.js','.ts']
}
};
package.json
{
"name": "angular2",
"version": "1.0.0",
"scripts": {
"start": "webpack --progress"
},
"dependencies": {
"#angular/common": "~2.4.0",
"#angular/compiler": "~2.4.0",
"#angular/core": "~2.4.0",
"#angular/forms": "~2.4.0",
"#angular/http": "~2.4.0",
"#angular/platform-browser": "~2.4.0",
"#angular/platform-browser-dynamic": "~2.4.0",
"#angular/router": "~3.4.0",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"zone.js": "^0.7.4"
},
"devDependencies": {
"ts-loader": "^2.0.2",
"typescript": "^2.2.1",
"typings": "^2.1.0",
"webpack": "^2.3.0"
}
}

Answer 1

Test for .js files and exclude node modules in your loaders, example for using javascript(react) with babel-loader:
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: [
'es2015', 'react', 'stage-0',
],
}
},
In your main.js file you can just do import Module from 'module' where 'module' is the name of your component. Webpack will bundle it if you refer to it like that.
Example if I want to include React: import React from 'react' - no relative paths needed.