Move watching from Webpack watch to Gulp watch

[chrispelzer]

Issue comes from https://github.com/laravel/elixir/issues/598

Fix from @lukepolo https://github.com/laravel/elixir/issues/598#issuecomment-238345649

In the original issue, it went back and forth that it was due to having multiple mix.webpack() calls. Although I was running into this issue using just one mix.webpack() call.

The issue seems to be completely on the watch on webpack (https://github.com/JeffreyWay/laravel-elixir-webpack-official/blob/master/src/index.js#L17)

This PR moves the watching from webpack to make the Webpack task have it's own registerWatchers like mix.sass() handles watching.

[laracasts]

And this fixes everything for you?

[chrispelzer]

@laracasts Fixes the watching for changes, though might be causing other issues.

I'm noticing it is displaying blank output when the Elixir.Notification appears.

Single mix.webpack()

$ gulp watch
[23:58:48] Using gulpfile ~/Sites/laravel/test/gulpfile.js
[23:58:48] Starting 'watch'...
[23:58:48] Starting 'all'...
[23:58:48] Starting 'sass'...
[23:58:48] Finished 'sass' after 269 ms
[23:58:48] Starting 'webpack'...
[23:58:48] Finished 'webpack' after 131 ms
[23:58:48] Finished 'all' after 404 ms
[23:58:48] Starting 'default'...
┌───────────────┬───────────────────────────────┬────────────────────────────────┬────────────────────┐
│ Task          │ Summary                       │ Source Files                   │ Destination        │
├───────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.sass()    │ 1. Compiling Sass             │ resources/assets/sass/app.scss │ public/css/app.css │
│               │ 2. Autoprefixing CSS          │                                │                    │
│               │ 3. Concatenating Files        │                                │                    │
│               │ 4. Writing Source Maps        │                                │                    │
│               │ 5. Saving to Destination      │                                │                    │
├───────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.webpack() │ 1. Transforming ES2015 to ES5 │ resources/assets/js/app.js     │ public/js/app.js   │
│               │ 2. Writing Source Maps        │                                │                    │
│               │ 3. Saving to Destination      │                                │                    │
└───────────────┴───────────────────────────────┴────────────────────────────────┴────────────────────┘
[23:58:48] Finished 'default' after 6.34 ms
[23:58:48] Finished 'watch' after 428 ms
[23:58:52]

Multiple mix.webpack()

$ gulp watch
[23:43:24] Using gulpfile ~/Sites/laravel/test/gulpfile.js
[23:43:24] Starting 'watch'...
[23:43:24] Starting 'all'...
[23:43:24] Starting 'sass'...
[23:43:24] Finished 'sass' after 257 ms
[23:43:24] Starting 'webpack'...
[23:43:24] Finished 'webpack' after 144 ms
[23:43:24] Starting 'webpack'...
[23:43:24] Finished 'webpack' after 4.21 ms
[23:43:24] Starting 'webpack'...
[23:43:24] Finished 'webpack' after 2.48 ms
[23:43:24] Finished 'all' after 412 ms
[23:43:24] Starting 'default'...
┌───────────────┬───────────────────────────────┬────────────────────────────────┬────────────────────┐
│ Task          │ Summary                       │ Source Files                   │ Destination        │
├───────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.sass()    │ 1. Compiling Sass             │ resources/assets/sass/app.scss │ public/css/app.css │
│               │ 2. Autoprefixing CSS          │                                │                    │
│               │ 3. Concatenating Files        │                                │                    │
│               │ 4. Writing Source Maps        │                                │                    │
│               │ 5. Saving to Destination      │                                │                    │
├───────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.webpack() │ 1. Transforming ES2015 to ES5 │ resources/assets/js/app.js     │ public/js/app.js   │
│               │ 2. Writing Source Maps        │                                │                    │
│               │ 3. Saving to Destination      │                                │                    │
├───────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.webpack() │ 1. Transforming ES2015 to ES5 │ resources/assets/js/app.js     │ public/js/app.js   │
│               │ 2. Writing Source Maps        │                                │                    │
│               │ 3. Saving to Destination      │                                │                    │
├───────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.webpack() │ 1. Transforming ES2015 to ES5 │ resources/assets/js/app.js     │ public/js/app.js   │
│               │ 2. Writing Source Maps        │                                │                    │
│               │ 3. Saving to Destination      │                                │                    │
└───────────────┴───────────────────────────────┴────────────────────────────────┴────────────────────┘
[23:43:24] Finished 'default' after 7.57 ms
[23:43:24] Finished 'watch' after 444 ms
[23:43:43]
[23:43:43]
[23:43:43]
[23:43:44]
[23:43:44]
[23:43:45]
[23:43:45]
[23:43:45]
[23:43:45]

[chrispelzer]

I'm going to try to explain what I'm seeing happening as short as possible.

Blank lines on output The blank lines are happening because of webpack and the Elixir Notification. I just can't figure out what's causing the delay that would make it output that blank before displaying the notification. But besides that, everything is being watched and compiled when needed.

Multiple entrys for mix.webpack() I don't think running multiple mix.webpack()'s as some people in the original issue are doing is ideal. Though this would require if an array of JS files are passed in

    mix.webpack(['main.js', 'main2.js', 'main3.js']);

Adding the below to the webpack.config seems to be the proper way to handle multiple compiling of entry JS files as it would run through 1 webpack instance to compile rather than 3 seperate webpack instances.

{
    entry: {
        a: "./a",
        b: "./b",
        c: ["./c", "./d"]
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].entry.js"
    }
}

https://webpack.github.io/docs/multiple-entry-points.html

Watch:true In short, watch: true doesn't work for me even if I use pure webpack-stream and webpack, it just won't pick up changes. I went back to my original gulpfile.js and I can't get watch:true to work at all.

The only thing that works for me at all whether with Elixir or my old way is gulp.watch

Before I started switching my gulpfile.js over to using elixir I had

    gulp.watch(jsDir + '/**/*.js', ['webpack']);

which would watch for any changes to src js and run the webpack task

gulp.task('webpack', function() {
    return gulp.src(jsDir + '/main.js')
        .pipe(webpack(require('./webpack.config.js')))
        .pipe(gulp.dest(targetJSDir));
});

webpack.config.js

var webpack = require("webpack");
var jQuery = require("jquery");

module.exports = {
    entry: './resources/js/main.js',
    output: {
        filename: '[name].js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: [
                    /node_modules\/slick-carousel/,
                    /node_modules\/spf/,
                    /node_modules\/nanobar/
                ],
                loader: 'babel-loader'
            }
        ]
    },
    externals: {
        "jquery": "jQuery"
    },
    devtool: "source-map",
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
            }
        })
    ]
}

[chrispelzer]

I didn't mention above that the webpack watch not firing is all related to running on VM, I played around with it outside of my VM and it all works as intended.

The only solution I found is to switch webpack watch to be polling for file changes every 500ms which can be passed in as watchOptions

    mix.webpack('main.js', 'public/_resources/js/', 'resources/js/', {watchOptions: {poll: true, aggregateTimeout: 500}});

http://andrewhfarmer.com/webpack-watch-in-vagrant-docker/

It's a very outside situation because it all relates to if webpack watch is running on a VM or not.

I'm fine with passing the watchOptions as part of the config on my own, so I can close out this PR if gulp watch isn't the direction this goes. It's just a very confusing situation that all relates to being on a VM or not while gulp watching.

[laracasts]

If polling fixes the issue, let's start with that.

Thanks for researching this!

[lukepolo]

Awesome, trying this out now

[lukepolo]

hmmm seems to work for 3-4 reloads, then fails and wont detect any further changes

ERROR in ./resources/assets/js/pages/server/components/ServerNav.vue Module build failed: Error: Unknown system error -116: Unknown system error -116, read at Error (native) @ ./~/babel-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/pages/server/ServerSites.vue 7:17-54 @ ./resources/assets/js/pages/server/ServerSites.vue @ ./resources/assets/js/app.js

Also this file renders fine when running gulp

[jonnywilliamson]

Currently working for me now, using homestead on vagrant

Thanks @chrispelzer for your research into this.

[erikwestlund]

I get the same error as before.

On Mon, Sep 12, 2016 at 7:27 PM, Jonathan notifications@github.com wrote:

Currently working for me now, using homestead on vagrant

Thanks @chrispelzer https://github.com/chrispelzer for your research into this.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/JeffreyWay/laravel-elixir-webpack-official/pull/15#issuecomment-246537352, or mute the thread https://github.com/notifications/unsubscribe-auth/AGNnsZldF8ml7F_VNjKyTabP-h_217qWks5qpe3ygaJpZM4J4ohQ .

[jonnywilliamson]

@erikwestlund I don't see your previous error on this thread??