How to configure multiple entries with webpack in ionic2


#1

I want to have 3 output javascript files after build, so I edited the webpack.config.js, here is my webpack.config.js:

var path = require(‘path’);
var webpack = require(‘webpack’);

var ionicWebpackFactoryPath = path.join(process.env.IONIC_APP_SCRIPTS_DIR, ‘dist’, ‘webpack’, ‘ionic-webpack-factory.js’);
var ionicWebpackFactory = require(ionicWebpackFactoryPath);

function getEntryPoint() {
if (process.env.IONIC_ENV === ‘prod’) {
return ‘{{TMP}}/app/main.prod.js’;
}

let entrys = {
‘main’: ‘{{SRC}}/app/main.dev.ts’,
‘vendor’: ‘{{SRC}}/app/vendor.ts’
}

return entrys;
}

function getPlugins() {
if (process.env.IONIC_ENV === ‘prod’) {
return [
// This helps ensure the builds are consistent if source hasn’t changed:
new webpack.optimize.OccurrenceOrderPlugin(),

    // Try to dedupe duplicated modules, if any:
    // Add this back in when Angular fixes the issue: https://github.com/angular/angular-cli/issues/1587
    //new DedupePlugin()
];

}

// for dev builds, use our custom environment
return [
ionicWebpackFactory.getIonicEnvironmentPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: ‘vendor’,
filename: ‘vendor.js’,
minChunks: Infinity
}),
];
}

function getSourcemapLoader() {
if (process.env.IONIC_ENV === ‘prod’) {
// TODO figure out the disk loader, it’s not working yet
return [];
}

return [{
test: /.ts$/,
loader: path.join(process.env.IONIC_APP_SCRIPTS_DIR, ‘dist’, ‘webpack’, ‘typescript-sourcemap-loader-memory.js’)
}];
}

function getDevtool() {
if (process.env.IONIC_ENV === ‘prod’) {
// for now, just force source-map for prod builds
return ‘source-map’;
}

return process.env.IONIC_SOURCE_MAP;
}

module.exports = {
entry: getEntryPoint(),
output: {
path: ‘{{BUILD}}’,
filename: ‘[name].js’,
chunkFilename: ‘[id].chunk.js’,
devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
},
devtool: getDevtool(),

resolve: {
extensions: [’.js’, ‘.ts’, ‘.json’]
},

module: {
loaders: [{
test: /.json$/,
loader: ‘json’
}].concat(getSourcemapLoader())
},

plugins: getPlugins(),

// Some libraries import Node modules but don’t use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
fs: ‘empty’,
net: ‘empty’,
tls: ‘empty’
}
};

But then my chrome shows an error,it says “webpackJsonp is not defined”,did I miss something?
PS:the output of “ionic -v” is 2.1.14.
Thanks for any help~~