Laravel Elixir Webpack Official

1.0.10 verified Sat Apr 25 auth: no javascript deprecated

Laravel Elixir Webpack Official is a Gulp-based extension that integrates Webpack with Laravel Elixir, version 6 and up. It simplifies compiling ECMAScript 2015 (ES6) to plain JavaScript, with support for custom output paths, base directories, and webpack.config.js files. The current stable version is 1.0.10, released with no recent updates. Key differentiators include tight Laravel Elixir integration, automatic merging of user configurations via Elixir.webpack.mergeConfig, and compatibility with Elixir's build pipeline. This package is now largely superseded by Laravel Mix, which offers a more modern and flexible approach.

Common errors

error Error: Cannot find module 'laravel-elixir' ↓

cause The package laravel-elixir is not installed as a dependency.

fix

Run: npm install laravel-elixir --save-dev

error TypeError: mix.webpack is not a function ↓

cause The package laravel-elixir-webpack-official is not installed or not required correctly.

fix

Ensure you have run: npm install laravel-elixir-webpack-official --save-dev, and require it in gulpfile (no explicit require needed as Elixir picks it up automatically).

error Module build failed: Error: Couldn't find preset "es2015" relative to directory ↓

cause Missing Babel preset es2015 required for ES6 compilation.

fix

Run: npm install babel-preset-es2015 --save-dev, then add presets to webpack.config.js or via Elixir.webpack.mergeConfig.

error Error: webpack.optimize.OccurenceOrderPlugin is not a constructor ↓

cause Using a newer version of Webpack (>=3.0.0) that removed the OccurenceOrderPlugin; Elixir's default config may reference it.

fix

Pin webpack to version 2.x (npm install webpack@2 --save-dev), or migrate to Laravel Mix.

Warnings

deprecated This package is deprecated. Laravel Mix is the official replacement and offers superior features. ↓

fix Switch to Laravel Mix (laravel-mix) for new projects, or migrate existing Elixir projects.

gotcha The package name 'laravel-elixir-webpack-official' may be confused with similar packages like 'laravel-elixir-webpack' or 'laravel-elixir-vue-2'. Ensure you install the correct one. ↓

fix Verify the exact package name from npm or the Laravel documentation.

gotcha Webpack configuration from webpack.config.js is merged with defaults; some options may not apply as expected due to Elixir's internal configuration. ↓

fix Test configuration thoroughly; use Elixir.webpack.mergeConfig for adjustments within Elixir context.

gotcha The mix.webpack method expects source files relative to resources/assets/js by default; if you change the base directory, update the third argument accordingly. ↓

fix Specify the base directory explicitly: mix.webpack('app.js', 'public/dist', 'app/assets/js')

gotcha Elixir's Gulpfile syntax requires elixir(function(mix) { ... }) wrapper; forgetting this will cause build errors. ↓

fix Always wrap your mix calls inside elixir(function(mix) { ... }).

Install

npm install laravel-elixir-webpack-official

yarn add laravel-elixir-webpack-official

pnpm add laravel-elixir-webpack-official

Imports

elixir
wrong
```
const elixir = require('laravel-elixir');
```
correct
```
import elixir from 'laravel-elixir';
```
Both CommonJS and ES module styles work with Elixir, but ES6 imports are preferred for consistency with modern Laravel projects.
mix.webpack()
wrong
```
elixir(function(mix) { mix.webpack('app.js', 'public/js'); });
```
correct
```
elixir(function(mix) { mix.webpack('app.js'); });
```
The first argument is the source file relative to resources/assets/js by default. The second argument is the output directory (default public/js). Providing only the source file is most common.
Elixir.webpack.mergeConfig
wrong
```
Elixir.webpack.mergeConfig({ module: { loaders: [ { test: /\.vue$/, loader: 'vue' } ] } });
```
correct
```
Elixir.webpack.mergeConfig({ module: { loaders: [{ test: /\.vue$/, loader: 'vue' }] } });
```
This method is used by plugins to extend default Webpack configuration. It recursively merges, preserving default loaders. Note the backslash escaping in regex for string context.

Quickstart

Shows basic installation and usage of mix.webpack to compile an ES2015 JS file.

// Install: npm install laravel-elixir-webpack-official --save-dev

// In gulpfile.js
const elixir = require('laravel-elixir');

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

// This compiles resources/assets/js/app.js to public/js/app.js
// To use webpack.config.js, create it in project root
// Example webpack.config.js:
// module.exports = { output: { filename: '[name].js' } };