Getting rid of Gulp for most packaging options


#1

Hi there,

I’m running ionic with gulp and webPack atm. I’m trying to depend less on Gulp since I sometimes experience issues with it. And prefer to do everything in webpack as I also do this in other Angular2 Applications, for my private dependancies it’s also easier to configure webpack for typescript hence why I chose it.

Right now I’m having troubles getting the scss to compile properly. I got so far to get no more errors on the @importionic.md” etc. which is because it’s in node_modules.

Now I however have problems loading the fonts, which are in node_modules/angular-ionic/fonts (if I’m not incorrect typing from head here).

so basically a list of this:

ERROR in ./app/theme/app.md.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto-regular.ttf in 
/Users/mathijs/projects/my.name.space/app/theme
 @ ./app/theme/app.md.scss 6:183570-183608

Which I believe is refered from inside theionic-angular project.

My current webpack config, note there are some duplicates and rarities, this is becuase I’m fiddling with it right now:

var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractCSS = new ExtractTextPlugin('stylesheets/[name].css');

module.exports = {
    entry: [
        path.resolve('polyfills'),
        path.resolve('app/app'),
        path.resolve('app/theme/app.md'),
        path.resolve('app/theme/app.wp'),
        path.resolve('app/theme/app.ios')
    ],
    output: {
        path: path.resolve('www/build/js'),
        filename: 'app.bundle.js',
        pathinfo: false // show module paths in the bundle, handy for debugging
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: 'awesome-typescript',
                query: {
                    doTypeCheck: true,
                    resolveGlobs: false,
                    externals: ['typings/browser.d.ts']
                },
                include: [path.resolve('app'), path.resolve('node_modules/mylib-ts'), path.resolve('polyfills')]
                //,exclude: /node_modules/
            },
            {
                test: /\.html$/,
                loader: 'raw-loader'
                //exclude: [path.resolve('src/index.html')]
            },
            {
                test: /\.js$/,
                include: path.resolve('node_modules/angular2'),
                loader: 'strip-sourcemap'
            },
            {
                test: /\.scss$/i, loader: extractCSS.extract(['css', 'sass'])
            }
        ],
        noParse: [
            /es6-shim/,
            /reflect-metadata/,
            /zone\.js(\/|\\)dist(\/|\\)zone/
        ]
    },
    plugins: [ new ExtractTextPlugin("css/[name].css") ],
    sassLoader: {
        includePaths: [
            'node_modules/ionic-angular',
            'node_modules/ionicons/dist/scss',
            'app'
    ]       },
    resolve: {
        root: ['app'],
        alias: {
            'angular2': path.resolve('node_modules/angular2')
        },
        extensions: ["", ".js", ".ts", ".scss"]
    }
};

I was wondering if anyone is also working with webpack and fixed a simular issue. I don’t feel too confident in my abilities to set up the entire thing but I’m trying, so any help would be appreciated.

Some other reasons I’m changing stuff, is because I dislike the templateUrl: build/somedir/somedir/somefile.html solution as I tend to have quite some folders, therefore I changed it to template: require(’./somefile.html’) which also reflects my other projects.

I hope for not much bashing and some help or tips ;-).


#2

I wouldn’t try to get rid of gulp for some good reasons. The gulpfile is how the CLI and various tools can work together. While the default uses browserify, you can swap that out for webpack pretty easily. But you’ll still need a gulpfile in order for webpack to be called through ionic server/build/run


#3

Yes. See this thread, especially the bit about app.variables.css.


#4

That was not my plan just the build of all containing the www folder


#5

So your solution brought me forward,

However I’d like to generate the css into files, I like them to be in the template actually.
Do you have any experience with that?

Whenever I try to use the extractor it seems to concatenate the three entry points into 1 main.css file. Name does not seem to be available. Will probably whine at that project.


#6

So slight update,

I’ve noticed for generating multiple files I need to name my entries, since I have 5 now:

entry: {
    polyfills: path.resolve('polyfills'),
    app: path.resolve('app/app'),
    // ,
    "app.md": path.resolve('app/theme/app.md'),
    "app.wp": path.resolve('app/theme/app.wp'),
    "app.ios": path.resolve('app/theme/app.ios')
},

This however also generates an app.md.js app.wp.js etc. With nothing in it :-).
This all seems quite nasty, any ideas?, I also get errors like "invalid closing tag which I find strange.


#7

Thinking about this,

Do I need different webpacks If I want to handle the scss separately and properly.

I do wonder where these closing tags errors are coming from though. never saw those before.


#8

Okay, the tag issue was because I had a duplicate loader :-).

This works, but does generate app.md.js for the css files etc: Note that my polyfills are not the default ionic stuff, it also contains require and more (comes from angular2-webpack-starter github project which I use for other applications).

var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: {
        app: [path.resolve('polyfills'), path.resolve('app/app')],
        "app.md": path.resolve('app/theme/app.md'),
        "app.wp": path.resolve('app/theme/app.wp'),
        "app.ios": path.resolve('app/theme/app.ios')
    },
    output: {
        path: path.resolve('www/build/'),
        filename: '[name].bundle.js',
        pathinfo: false // show module paths in the bundle, handy for debugging
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: 'awesome-typescript',
                query: {
                    doTypeCheck: true,
                    resolveGlobs: false,
                    externals: ['typings/browser.d.ts']
                },
                include: [path.resolve('app'), path.resolve('node_modules/my-ts-lib'), path.resolve('polyfills')]
                //,exclude: /node_modules/
            },
            {
                test: /\.html$/,
                loader: 'raw-loader'
                //exclude: [path.resolve('src/index.html')]
            },
            {
                test: /\.js$/,
                include: path.resolve('node_modules/angular2'),
                loader: 'strip-sourcemap'
            },
            {
                test: /\.scss$/i, loader:
                ExtractTextPlugin.extract(['css!sass'])

            },
            {
                test: /\.woff(2)?(\?v=.+)?$/,
                loader: "url?limit=10000&mimetype=application/font-woff&name=./fonts/[hash].[ext]"
            },
            {
                test: /\.(ttf|eot|svg)(\?v=.+)?$/,
                loader: 'file?name=./fonts/[hash].[ext]'
            },
        ],
        noParse: [
            /es6-shim/,
            /reflect-metadata/,
            /zone\.js(\/|\\)dist(\/|\\)zone/
        ]
    },
     plugins: [ new ExtractTextPlugin("[name].css", {allChunks: false}) ],
    sassLoader: {
        includePaths: [
            'node_modules/ionic-angular',
            'node_modules/ionicons/dist/scss'
    ]       },
    resolve: {
        root: ['app'],
        alias: {
            'angular2': path.resolve('node_modules/angular2')
        },
        extensions: ["", ".js", ".ts", ".scss"]
    }
};

my index.html refers like the orinal ionic template to the css but now the path is build/app.ios.css f/e.
These are all in the root (I wanted them in the css dir but that’s difficult using the extractor and parsing fonts for sass since it doesn’t know about the extractor path, which will resolve in a mismatch).

fonts are placed in build/fonts. All other things, for now in the root.