Laravel-elixir-webpack-advanced NPM

laravel-elixir-webpack-advanced

Simple extension to laravel elixir to build javascript bundle with webpack.

Install

npm install --save-dev laravel-elixir-webpack-advanced

Features

ES6-loader with Babel - source maps - multiple bundles - shared modules
Bower dependency resolver - you can add any bower package to your application like you did with npm - images will be resolved automatically and placed in (plublicPath / js.outputFolder / <-name of bower package->) - css (with correct assets path) will be extracted to plublicPath / js.outputFolder / <-name of main entry point->.css
HTML loader - you can require any html template in your js-application
Stylus and Sass|Scss loaders
Native watcher - if you start gulp watch - webpack task will started in watch mode, so any further changes of application files would not restart webpack task

Usage

Example Gulpfile:

var elixir = require("laravel-elixir"),
	config = elixir.config;

// Here you can override default elixir configuration
// config.assetsPath = 'path/to/assets/dir';
// ...

require("laravel-elixir-webpack-advanced");

elixir(function(mix) {
    mix.webpack("app.js");
});

First argument is the entry points of your application (default directory is resources/assets/js). In second argument you could pass webpack options. In production mode, bundle will be compressed. Third argument - object for webpack.ProvidePlugin.

Advanced example

/**
* If you wish to add some vendor libs to your project - you can redefine `entry` option 
* in webpack config: `entry: { vendor: ['jquery', 'vue', ...] }`
* This list of libraries will be bundled into `vendor.js`
*/

elixir(function(mix) {
    mix.webpack(
    	/**
    	* You can simply write string: 'app' or 'app.js' => output: main.js
    	* or object: { bundle: 'app.js' } ...
    	*/
        { bundle: 'app.js' }, // Output will be: bundle.js
        {
        	entry: {
        		// before start gulp task - you should install jquery (or other libs) by npm or bower
        		vendor: ['jquery'] 
        	},
	        output: {
	        	// By default: `/${config.js.outputFolder}/` - (/js/)
            		publicPath: `/assets/${config.js.outputFolder}/` // Browser output path: /assets/js/
            	}
        }, 
        /** 
        * Global variables for vendor libs
        * No need to require jquery in all your modules
        */
        {
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }
    );
});