Registry / devops / laravel-elixir-webpack-official

laravel-elixir-webpack-official

library1.0.10jsnpmunverified

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.

devops web-framework

npm install laravel-elixir-webpack-official

github ↗package ↗

INSTALL

IMPORT

SIG · LARAVEL-ELIXIR-WEB

laravel-elixir-webpack-official

devopsjavascriptv1.0.10

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

elixir

✓ import elixir from 'laravel-elixir';

✗ const elixir = require('laravel-elixir');

Both CommonJS and ES module styles work with Elixir, but ES6 imports are preferred for consistency with modern Laravel projects.

mix.webpack()

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

✗ elixir(function(mix) { mix.webpack('app.js', 'public/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

✓ Elixir.webpack.mergeConfig({ module: { loaders: [{ test: /\.vue$/, loader: 'vue' }] } });

✗ 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.

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' } };

Debug

Known issues

deprecatedThis 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.

affects: >=0.0.0

gotchaThe 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.

affects: >=0.0.0

gotchaWebpack 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.

affects: >=0.0.0

gotchaThe 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')

affects: >=0.0.0

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

fix

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

affects: >=0.0.0

Errors

Common errors & fixes

Error: Cannot find module 'laravel-elixir'

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

fix

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

TypeError: mix.webpack is not a function

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).

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

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: webpack.optimize.OccurenceOrderPlugin is not a constructor

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.

Upgrade

Version history

1.0.10latest on npm

Audit

Dependencies

laravel-elixirrequiredThis is an extension for Laravel Elixir, so it must be installed alongside Elixir (v6+).

webpackrequiredWebpack is required as a peer dependency for compilation.

gulprequiredElixir itself depends on Gulp, which is needed to run the build tasks.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/JeffreyWay/laravel-elixir-webpack-official ↗

packagehttps://www.npmjs.com/package/laravel-elixir-webpack-official ↗