{"id":20176,"library":"laravel-elixir-webpack-official","title":"Laravel Elixir Webpack Official","description":"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.","status":"deprecated","version":"1.0.10","language":"javascript","source_language":"en","source_url":"https://github.com/JeffreyWay/laravel-elixir-webpack-official","tags":["javascript","laravel","elixir","webpack","gulp"],"install":[{"cmd":"npm install laravel-elixir-webpack-official","lang":"bash","label":"npm"},{"cmd":"yarn add laravel-elixir-webpack-official","lang":"bash","label":"yarn"},{"cmd":"pnpm add laravel-elixir-webpack-official","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This is an extension for Laravel Elixir, so it must be installed alongside Elixir (v6+).","package":"laravel-elixir","optional":false},{"reason":"Webpack is required as a peer dependency for compilation.","package":"webpack","optional":false},{"reason":"Elixir itself depends on Gulp, which is needed to run the build tasks.","package":"gulp","optional":false}],"imports":[{"note":"Both CommonJS and ES module styles work with Elixir, but ES6 imports are preferred for consistency with modern Laravel projects.","wrong":"const elixir = require('laravel-elixir');","symbol":"elixir","correct":"import elixir from 'laravel-elixir';"},{"note":"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.","wrong":"elixir(function(mix) { mix.webpack('app.js', 'public/js'); });","symbol":"mix.webpack()","correct":"elixir(function(mix) { mix.webpack('app.js'); });"},{"note":"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.","wrong":"Elixir.webpack.mergeConfig({ module: { loaders: [ { test: /\\.vue$/, loader: 'vue' } ] } });","symbol":"Elixir.webpack.mergeConfig","correct":"Elixir.webpack.mergeConfig({ module: { loaders: [{ test: /\\.vue$/, loader: 'vue' }] } });"}],"quickstart":{"code":"// Install: npm install laravel-elixir-webpack-official --save-dev\n\n// In gulpfile.js\nconst elixir = require('laravel-elixir');\n\nelixir(function(mix) {\n    mix.webpack('app.js');\n});\n\n// This compiles resources/assets/js/app.js to public/js/app.js\n// To use webpack.config.js, create it in project root\n// Example webpack.config.js:\n// module.exports = { output: { filename: '[name].js' } };","lang":"javascript","description":"Shows basic installation and usage of mix.webpack to compile an ES2015 JS file."},"warnings":[{"fix":"Switch to Laravel Mix (laravel-mix) for new projects, or migrate existing Elixir projects.","message":"This package is deprecated. Laravel Mix is the official replacement and offers superior features.","severity":"deprecated","affected_versions":">=0.0.0"},{"fix":"Verify the exact package name from npm or the Laravel documentation.","message":"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.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Test configuration thoroughly; use Elixir.webpack.mergeConfig for adjustments within Elixir context.","message":"Webpack configuration from webpack.config.js is merged with defaults; some options may not apply as expected due to Elixir's internal configuration.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Specify the base directory explicitly: mix.webpack('app.js', 'public/dist', 'app/assets/js')","message":"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.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Always wrap your mix calls inside elixir(function(mix) { ... }).","message":"Elixir's Gulpfile syntax requires elixir(function(mix) { ... }) wrapper; forgetting this will cause build errors.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run: npm install laravel-elixir --save-dev","cause":"The package laravel-elixir is not installed as a dependency.","error":"Error: Cannot find module 'laravel-elixir'"},{"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).","cause":"The package laravel-elixir-webpack-official is not installed or not required correctly.","error":"TypeError: mix.webpack is not a function"},{"fix":"Run: npm install babel-preset-es2015 --save-dev, then add presets to webpack.config.js or via Elixir.webpack.mergeConfig.","cause":"Missing Babel preset es2015 required for ES6 compilation.","error":"Module build failed: Error: Couldn't find preset \"es2015\" relative to directory"},{"fix":"Pin webpack to version 2.x (npm install webpack@2 --save-dev), or migrate to Laravel Mix.","cause":"Using a newer version of Webpack (>=3.0.0) that removed the OccurenceOrderPlugin; Elixir's default config may reference it.","error":"Error: webpack.optimize.OccurenceOrderPlugin is not a constructor","affected_versions":"webpack >=3.0.0"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}