I am in the process of developing a third party datepicker component for Angular (2+). Previously I have used Rollup for bundling however due to constant issues dealing with MomentJS imports I am looking to replace Rollup with Webpack. I have Webpack working however the file size difference is massive;
- Rollup - 32kb
- Webpack - 504kb
On looking into the generated Webpack bundle it seems that all dependencies are being bundled (Angular etc). How can I specify to Webpack that I only want to bundle my component's files and ignore vendor code?
For reference the two config files;
// rollup.config.js
export default {
entry: 'dist/index.js',
dest: 'dist/bundles/bundle.js',
sourceMap: false,
format: 'umd',
moduleName: 'ng.myModule',
globals: {
'@angular/core': 'ng.core',
'@angular/core/testing': 'ng.core.testing',
'@angular/common': 'ng-common',
'@angular/forms': 'ng-forms',
'rxjs/Observable': 'Rx',
'rxjs/ReplaySubject': 'Rx',
'rxjs/add/operator/map': 'Rx.Observable.prototype',
'rxjs/add/operator/mergeMap': 'Rx.Observable.prototype',
'rxjs/add/operator/pluck': 'Rx.Observable.prototype',
'rxjs/add/operator/first': 'Rx.Observable.prototype',
'rxjs/add/observable/fromEvent': 'Rx.Observable',
'rxjs/add/observable/merge': 'Rx.Observable',
'rxjs/add/observable/throw': 'Rx.Observable',
'rxjs/add/observable/of': 'Rx.Observable'
}
}
-
// webpack.config.js
const path = require('path');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
const config = {
entry: path.resolve(__dirname, 'dist/index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundles/bundle.js',
libraryTarget: 'umd'
},
plugins: [
new UglifyJsPlugin({
beautify: false,
output: {
comments: false
},
mangle: {
screw_ie8: true
},
compress: {
screw_ie8: true,
warnings: false,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true,
negate_iife: false
},
})
]
};
module.exports = config;
