Skip to content

Instantly share code, notes, and snippets.

@JeffreyWay
Last active February 9, 2019 04:31
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save JeffreyWay/207e3bfdb5cafff050a1d75dbf755a5c to your computer and use it in GitHub Desktop.
Save JeffreyWay/207e3bfdb5cafff050a1d75dbf755a5c to your computer and use it in GitHub Desktop.
Laravel Elixir Webpack Extension
var gulp = require('gulp');
var gulpWebpack = require('webpack-stream');
var Elixir = require('laravel-elixir');
var $ = Elixir.Plugins;
var config = Elixir.config;
/*
|----------------------------------------------------------------
| Webpack Compilation
|----------------------------------------------------------------
|
| This task allowed you to integrate Webpack into your main Gulp
| and Laravel ELixir workflow. Want Webpack module bundling,
| but Elixir CSS compilation and versioning? No problem!
|
*/
Elixir.extend('webpack', function (src, output, baseDir, options) {
var paths = prepGulpPaths(src, output, baseDir);
this.onWatch(() => gulp.start('webpack'));
return new Elixir.Task('webpack', function () {
this.log(paths.src, paths.output);
gulpTask(paths, options);
});
});
/**
* Create the Gulp task.
*
* @param {GulpPaths} paths
* @param {object} options
* @return {mixed}
*/
function gulpTask(paths, options) {
return (
gulp
.src(paths.src.path)
.pipe(webpack(options))
.on('error', function(e) {
new Elixir.Notification('Webpack Compilation Failed!');
this.emit('end');
})
.pipe($.rename(paths.output.name))
.pipe($.if(config.production, $.uglify(config.js.uglify.options)))
.pipe(gulp.dest(paths.output.baseDir))
.pipe(new Elixir.Notification('Webpack Compiled!'))
);
}
/**
* Prepare the Gulp src and output paths.
*
* @param {mixed} src
* @param {string|null} output
* @param {string|null} baseDir
* @return {void}
*/
function prepGulpPaths(src, output, baseDir) {
return new Elixir.GulpPaths()
.src(src, baseDir || config.get('assets.js.folder'))
.output(output || config.get('public.js.outputFolder'), 'bundle.js')
}
/**
* Fetch the appropriate Webpack configuration.
*
* @param {object|null} options
* @return {object}
*/
function webpack(options) {
return gulpWebpack(options || {
watch: Elixir.isWatching(),
module: {
loaders: [
{ test: /\.js$/, loader: 'buble' }
]
}
}, require('webpack'));
}
{
"devDependencies": {
"buble": "^0.7.0",
"buble-loader": "^0.2.1",
"gulp": "^3.9.1",
"laravel-elixir": "^6.0.0-2",
"webpack": "^2.1.0-beta.7",
"webpack-stream": "^3.2.0"
}
}
@Francismori7
Copy link

Maybe we can also include vue-loader? For .vue files? I tried but failed using:

                loaders: [
                    {test: /\.js$/, loader: 'buble'},
                    {test: /\.vue$/, loader: 'vue'}
                ]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment