These are chat archives for AngularClass/angular2-webpack-starter

19th
May 2016
Dominic
@domfarolino
May 19 2016 13:43
@falconmick I'm in a similar position as @Nevergonnachange , I have an existing angular2 project using node and express as a backend right now, the site serves my main index file and angular2 takes care of the view from there, is it easy to convert this from a system.js => webpack project?
I'd rather not have webpack start a localhost and open a browser and port and everything if I could just keep all that on the server and continue serving my index file, that seems like the best scenario especially if I'm deploying to heroku but I could definitely be wrong there
my project is at https://github.com/domfarolino/angular2-login-seed if that helps. I'd rather be using webpack than sys if that make sense to do
Sean Larkin
@TheLarkInn
May 19 2016 13:57
Dominic
@domfarolino
May 19 2016 14:01
@TheLarkInn So this will go in the Node backend?
Is it possible to separate these two processes? As in just have node serve the static index file that webpack is in charge of managing dependency chain with?
I don't know much about webpack so I'm probably treating it too much like systemJS
Sean Larkin
@TheLarkInn
May 19 2016 14:16
Yup!
Thats what you add to your server.js
@domfarolino https://webpack.github.io/docs/webpack-dev-middleware.html you can reference this small example to use webpack-dev-server also in your server.js
Dominic
@domfarolino
May 19 2016 14:27
alright i'll look into it thank you
Sean Larkin
@TheLarkInn
May 19 2016 14:27
Np! :-D Happy webpacking.
Dominic
@domfarolino
May 19 2016 14:28
I find it odd that anything is necessary on the server side but I guess when I dig in more that will become clear lol
Sean Larkin
@TheLarkInn
May 19 2016 14:30
Well. I found that instead, learning about the webpack fundamentals, how to set up any webpack configuration, will make things more clear.
Implementing the NodeJS API for Webpack after wards will then just be a matter of pluggin into your server.js (most times)
Joe Saad
@joeSaad
May 19 2016 15:40
I have done a number of npm installs on https://github.com/AngularClass/angular2-webpack-starter#typings and it keeps giving Cannot find module 'webpack-core/lib/ReplaceSource'
any suggestions on this one?
Joe Saad
@joeSaad
May 19 2016 15:50
angular2-webpack-lite, i'm trying this one.. which server port does it run on?
Yannick
@LPalmito
May 19 2016 16:10

Hey guys!
When trying to launch a webpack-dev-server --progress —colors, it looks like everything is working perfectly within the terminal, but when I go to localhost:8080 on my browser, I have an

Uncaught ReferenceError: webpackJsonp is not defined

within the console. Does anybody know where it could come from please?

It’s amazing work that you’ve done by the way, thanks a lot!
Here is my web pack.config.ts:
var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: {
        app: './app/boot.ts',
        vendor: './vendor.ts'
    },
    output: {
        path: 'bin',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    plugins: [
        //new webpack.optimize.CommonsChunkPlugin('vendor', 'deps.js'),
        new webpack.optimize.UglifyJsPlugin({
            // disable mangling due to bug in beta.1, beta.2, beta.3
            comments: false,
            compress: {
                screw_ie8 : true,
                warnings: false
            },
            sourceMap: false
        })
    ],
    resolve: {
        extensions: ['', '.js', '.ts']
    },
    module: {
        loaders: [
            { test: /\.ts$/, loader: 'ts-loader' },
            { test: /\.html$/, loader: 'raw-loader' },
            { test: /\.css$/, loader: 'raw-loader' }
        ],
        noParse: [
            path.join(__dirname, 'node_modules', 'angular2', 'bundles')
        ]
    }
};
Any idea would be really appreciated, thank you in advance!
Alexey Popov
@ASDAlexey
May 19 2016 21:03

Hi. I want to use stylus for css with current project.

                test: /\.styl$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'style-loader!css-loader?sourceMap!postcss-loader!stylus?resolve url'
            }
and add postcss loader  postcss: function () {
        return [
            require('postcss-cssnext'),
            require('postcss-clearfix'),
            require('postcss-flexbugs-fixes'),
            require('postcss-size'),
            require('postcss-assets')({
                loadPaths: ['images/']
            }),
            require('postcss-svg')({
                paths: ['src/assets/images']
            })
        ];
    },

Almost everything works fine
https://monosnap.com/file/J89HXh35keoCif5WtnMKYzmrRncwHT
only can not add pictures in styles if I add background-image: url('../images/done.svg') in my .styl file an error occurs https://monosnap.com/file/wLwjGDamF5052k3oEjLQxXCHxR5Wif
I would be grateful for any tips in solving this problem

Sean Larkin
@TheLarkInn
May 19 2016 21:14
@LPalmito usually Thai error is in regards to setting up CommonsChunkPlugin incorrectly
What version of webpack are you using
That 'resolve-url' should have a dash between it. Also have you tried posting file loader to it instead?
Using*
Sean Larkin
@TheLarkInn
May 19 2016 21:19
@joeSaad I believe it's 9000
You can look in the package.json where I have it inlined as a CLI arg
Under scripts