Simple extension to laravel elixir to build javascript bundle with webpack.
npm install --save-dev laravel-elixir-webpack-advanced
- 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
- if you start
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 point[s] 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.
/**
* 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'
}
);
});