EDIT: updated webpack.config.js for webpack2, switch typescript to ts-loader, update for ionic beta 7
I use webpack to package other angular apps, so I was really excited to see Ionic2 adopting it in the early alpha releases. Now apparently they have decided to go in a different direction, and if anybody else is interested in continuing to use webpack to build Ionic2 apps, I thought I would share what I have learned so far in order to at least get a starter app to run.
webpack.config.js
var path = require('path');
module.exports = {
entry: [
'reflect-metadata/Reflect',
'./zones',
path.resolve('app/app')
],
output: {
path: path.resolve('www/build/js'),
filename: 'app.bundle.js',
pathinfo: true // show module paths in the bundle, handy for debugging
},
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts' },
{ test: /\.scss$/, loaders: "style!css!sass" },
{ test: /\.png$/, loader: 'url?limit=100000' },
{ test: /\.woff(2)?(\?v=.+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=.+)?$/, loader: 'file' },
{ test: /\.html$/, loader: 'html' },
{ test: /\.json$/, loader: 'json' }
],
noParse: [
/reflect-metadata/,
]
},
resolve: {
// NOTE: this syntax is for webpack2
modules: [
path.join(__dirname, 'www', 'app'),
"node_modules"
],
extensions: ["", ".js", ".ts"]
},
sassLoader: {
includePaths: [
path.resolve(__dirname, "./node_modules/ionic-angular/"),
path.resolve(__dirname, "./node_modules/ionicons/dist/scss/")
]
}
};
Obviously, youāre going to need to make sure all those loaders are installed as devDependencies: ts-loader, css-loader, html-loader, style-loader, sass-loader, url-loader, file-loader. If you want the functionality of āionic serveā, you will also want to install webpack-dev-server globally.
index.html
Get rid of the stylesheet links in the head and the angular-polyfills load in the body. Weāve put angular-polyfills in as an entry point, so itās already in the bundle. The stylesheets will get added inā¦
app.ts
Load the stylesheets in the constructor, like this:
constructor(platform: Platform) {
platform.ready().then(() => {
if (platform.is('ios')) {
require('./theme/app.ios.scss');
} else {
if (platform.is('windows')) {
require('./theme/app.wp.scss');
} else {
require('./theme/app.md.scss');
}
}
StatusBar.styleDefault();
});
}
If you prefer ios to md as a default, you could swap the ios check for an android one and have ios where I have md.
app.variables.css
Add this to the āApp Shared Variablesā section:
$font-path: '../../node_modules/ionic-angular/fonts';
require.d.ts
At the same directory level as app.ts:
declare var require: {
<T>(path: string): T;
(paths: string[], callback: (...modules: any[]) => void): void;
ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
};
zones.ts
At the same level as webpack.config.js:
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
The long stack trace import could be made conditional on some sort of development/production flag.
templates
One thing I really love about using webpack here is that page classes can load their templates and stylesheets with it, without needing to fool around with copying files into staging directories. So, for example, the starter home.ts can use:
template: require<string>('./home.html')
This also works for custom styles intended to apply to a single page or component:
styles: [require<string>('./component.styl')]
Youāll need a .styl test using āraw!stylusā and the stylus-loader. To use css or scss here, youāll need some sort of special case from the default scss loader that loads to raw instead of the style loader.