Webpack & TypeScript CommonsChunkPlugin not working -
i've followed few guides setting commonschunkplugin doesn't seem working. i've searched , read other posts on here no luck.
i have 3 files (typescript) importing few of same libraries (fancybox, moment , pikaday). being imported using es module syntax:
import * fancybox 'fancybox'; import * moment 'moment'; import * pikaday 'pikaday';
my tsconfig.json
set output es6 syntax , modules:
{ "compileonsave": true, "compileroptions": { "target": "es6", "module": "es6", "noemitonerror": true, "moduleresolution": "node", "sourcemap": true, "diagnostics": false, "nofallthroughcasesinswitch": true, "noimplicitreturns": true, "traceresolution": false }, "exclude": [ "node_modules", "venue-finder" ] }
my webpack.config.js
:
const webpack = require('webpack'); const path = require('path'); const webpacknotifierplugin = require('webpack-notifier'); const bundleanalyzerplugin = require('webpack-bundle-analyzer').bundleanalyzerplugin; module.exports = [{ bail: true, entry: { global: path.resolve(__dirname, 'js/responsive/global.ts'), todo: path.resolve(__dirname, 'js/todo/todo.ts'), budget: path.resolve(__dirname, 'planner/javascript/budget/budgetplannerui.ts'), promotions: path.resolve(__dirname, 'js/promotions-management.ts'), planner: path.resolve(__dirname, 'planner/javascript/myplanner.ts') }, output: { path: path.resolve(__dirname, 'dist/js'), filename: '[name].js' }, module: { rules: [{ test: /\.ts(x?)$/, exclude: /node_modules/, use: [ { loader: 'babel-loader', options: { 'presets': [ ['env', { 'modules': false }] ] } }, { loader: 'ts-loader' } ] }] }, plugins: [ new webpacknotifierplugin({ alwaysnotify: true }), new webpack.ignoreplugin(/^\.\/locale$/, /moment$/), new webpack.optimize.commonschunkplugin({ name: 'commons', filename: 'commons-bundle.js', minchunks: 2 }), new bundleanalyzerplugin() ], resolve: { extensions: ['.js', '.ts', '.tsx'] }, devtool: 'none' }];
as far can see should finding chunk used twice or more (which there three) , moving in commons-bundle.js
when run webpack
, @ output files can see pikaday, moment , fancybox being included in each of files rather being moved commons-bundle.js
any appreciated.
you want have minchunks option function instead of integer value. fancybox, moment, , pickaday coming node_modules, hence modifying minchunks below should work -
new webpack.optimize.commonschunkplugin({ name: 'commons', filename: 'commons-bundle.js', chunks: [global, todo, budget, promotions, planner], //optional, find practice minchunks: function (module) { return module.context && module.context.indexof("node_modules") !== -1; } }),
Comments
Post a Comment