Webpack Setup

https://www.npmjs.com/package/laravel-elixir-webpack

Laravel v6 has Webpack support. It's not quite out yet, but you can go ahead and start using it.

npm instal [email protected]

And then:

elixir(function(mix) {
    mix.webpack('main.js');
});

@JeffreyWay Laravel 6 or 5.3?

Thanks everybody for the help. Its Laravel 5.2.39. I am finding a lot of webpack and gulp instances. From what I understand you shouldn't need gulp if you have webpack. There is also web-pack-dev-server. I wasn't aware of a Laravel 6

He means Laravel elixir version 6. Not Laravel itself.

I have elixir version 6. Here is my gulp file.

var elixir = require('laravel-elixir');
require('laravel-elixir-webpack');

elixir(function(mix) {
    mix.sass('app.scss');
});


elixir(function(mix) {
    mix.webpack('main.js', {
        module: {
            loaders:[
                {
                    test:/\.js$/,
                    loaders:["vue-loader"],
                }
            ],
        },
    });
});

And In my main.js file nothing seems to be working. Just simple async routes.

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter);
/*
Setup our router
 */

var router = new VueRouter();

router.map({
  '/': {
  component: (resolve) => { require(['./components/views/about.vue'], resolve); }
},
  '/about': {
  component: (resolve) => { require(['./components/views/contact.vue'], resolve); }
}
});

var App = Vue.extend({});

router.start(App, '#app');

Everything compiles but I keep getting the following output

/public/js/1.main.js
/public/js/1.main.js.map
/public/js/2.main.js
/public/js/2.main.js.map

It Works in webpackbin

http://www.webpackbin.com/EyqN8jBDZ

Is there is something I am missing. Probably something simple.

So I changed my gulpfile.js into this but still no luck. Webpack isn't compiling any of my .vue files into my main.js.

var elixir = require('laravel-elixir');


var loaders = [
    {
        "test": /\.js?$/,
        "test": /\.vue?$/,
        "exclude": /node_modules/,
        "loader": "babel",
        "query": {
            "presets": [
                "es2015",
                "stage-0"
            ],
            "plugins": []
        }
    },
    {
        loaders:["vue","vue-loader"],
    }
];


elixir(function(mix) {
    mix.webpack('main.js', {
        module: {
            loaders: loaders
        },
    },'./public/js/main.js');
});

@stargatesg1 , webpack() just accept this 3 parameters webpack(src, baseDir, output).

I just used webpack now without elixr. Here is my webpack.config.js file

var path = require("path");

module.exports = {
    context: path.resolve('resources'),
    entry: [
        './assets/js/main.js'
    ],
    output: {
        path: path.resolve('public/js'),
        publicPath: 'http://www.devaldous.com/js/',
        filename: "main.js"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/
            },
            {
                test: /\.vue$/,
                loader: 'vue'
            }
        ]
    },
    vue: {
        loaders: {
            js: 'babel-loader'
        }
    }
}

Don't forget "devtool" if you want source maps.

can i use this in laravel 5.1 ? Thanks.

@d3cypher Yes.

Also for future reference, better to post a new topic than to revive a 6 month old thread. ;)

@willvincent Oh alright. Me just a newbie here in Laracasts. But thanks for the tip

@willvincent is webpack better than browserify ?

Better is subjective. I don't have any data readily available to make any claims one way or the other, but I get the impression webpack is (or can be) more efficient than browserify. They're similar in that they both allow you to assemble a bundle of npm packages to serve to the browser, as far as I know that's about the extent of the similarities.

Webpack is that plus basically everything gulp/grunt/etc give you, and is capable of splitting out code chunks that can be loaded asynchronously. So, does more, is at least theoretically producing more efficient bundles, I guess if I had to say one way or the other I'd probably say that yes, I do believe webpack is better.