CODEWITHSUNDEEP
angularjswebpack
EricC
EricC

Reputation: 5870

How to make webpack exclude angular2 modules

I am trying to make a simple Webpack-version the Angular 2 5 min quickstart tutorial.

As it may be problematic to just let Webpack autmatically include all modules needed, I am including the vendor scripts from the html "directly", almost just like the tutorial, except that I do not need system.js for a webpack setup, so I am not including that, but I do need the "bundle.js" which webpack produces:

<body>

<my-app></my-app>

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="bundle.js"></script>

</body>

If I use this config for webpack, I almost have reach my goal:

module.exports = {
  entry: './src/boot.ts',
  output: {
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['', '.ts', '.js']
  },
  module: {
    loaders: [
      { test: /\.ts$/, exclude: [/angular2/], loader: 'ts-loader' }
    ],
    noParse: [/angular2/]
  }
};

Without the noParse, webpack would include 223 modules, which by itself is as it should be, but for some strange reason this results in a problematic huge bundle file (see link above). With noParse I am almost reach my goal, but not completely, it still include two angular-modules that I do not want webpack to include:

   [0] ./src/boot.ts 195 bytes {0} [built]
   [1] ./~/angular2/platform/browser.js 13.1 kB {0} [built]
   [2] ./src/myapp/components/myapp.ts 1.27 kB {0} [built]
   [3] ./~/angular2/core.js 4.54 kB {0} [built]

I do not want webpack to include any Angular 2 modules (as I already have included that). It is probably included because that my two own-made modules uses these two modules. But how can I make webpack ignore these? My noParse (or the exclude) is not helping here...

Upvotes: 1

Views: 3111

Answers (1)

frishi
frishi

Reputation: 882

Did you take a look at IgnorePlugin https://webpack.github.io/docs/list-of-plugins.html#ignoreplugin

What you are saying could be achieved by doing something like this:

var webpack = require("webpack");
module.exports = {
  // ...
  plugins: [
    new webpack.IgnorePlugin(/angular2$/)
  ]
};

Upvotes: 4

Related Questions