Skip to content

A laravel mix extension that allow us to get the webpack config as an object and with a second argument that provide the circularStringify function that help with stringification. So we do whatever we want with it. Including writing to files. Unlike dump() component. The extension does patch dump() and dumpWebpackConfig() as well to take that ca…

Notifications You must be signed in to change notification settings

MohamedLamineAllal/laravel-mix-webpack-config

Repository files navigation

Laravel mix WebpackConfig extension

A laravel mix extension that allow us to get the webpack config as a string. So we do whatever we want with it.
Including writing to files. Unlike .dump() component that only print to console.

Also the extension does patch .dump() and dumpWebpackConfig() to take a callback that return the config.

// without dumping the config
mix.getWebpackConfig((config, stringify) => {
  fs.writeFileSync('webpackConfig.output.js', stringify(config));
});

// with dumping the config (patched)
mix.dump((config, stringify) => {
  fs.writeFileSync('webpackConfig.output.js', stringify(config));
});

// or
mix.dumpWebpackConfig((config, stringify) => {
  fs.writeFileSync('webpackConfig.output.js', stringify(config));
});

Links

npmjs: https://www.npmjs.com/package/laravel-mix-webpack-config
laravel-mix extensions: https://laravel-mix.com/extensions/webpack-config

Installation:

I suggest using pnpm

pnpm

pnpm add laravel-mix-webpack-config -D

npm

npm install laravel-mix-webpack-config -D

yarn

yarn add laravel-mix-webpack-config -D

Usage Example:

const mix = require('laravel-mix');
const fs = require('fs');

require('laravel-mix-webpack-config');

const public_dir = 'public';

mix
  .setPublicPath(`${public_dir}`)
  .js(`${public_dir}/src/app.js`, `${public_dir}/dist`)
  .vue()
  .version([`${public_dir}/src/index.js`])
  .extract(['vue'], `dist/v.js`)
  .getWebpackConfig((config, stringify) => {
    fs.writeFileSync('webpackConfig.output.js', stringify(config));
  });

You can see it allow us to write the config to a file:

mix.getWebpackConfig((config, stringify) => {
  fs.writeFileSync('webpackConfig.output.js', stringify(config));
});

Take a callback as a param. With signature:

(
  webpackConfig: WebpackDomain.Configuration,
  stringify: DumpWebpackConfig['circularStringify'],
) => void;

webpackConfig: the final webpack config as an object.
stringify: Same circular stringify function that is implemented in the Dump component (when you use .dump()). So you expect to get the same string as the one used by .dump() logging component.

Giving this structure. You can do whatever you want with the object. Including something involving stringify like writing to a file.

Patching dump() and dumpWebpackConfig()

dump() and dumpWebpackConfig() are patched. So they take the same callback. With the same signature. They keep working as before. Plus that callback as an extra part of the patch.
dump(), dumpWebpackConfig() => dump the config to the console + can get the config as well to do something with it. Like writing to a file.

Aliases

You can use any of the bellow Aliases in place of getWebpackConfig().

.getWebpackConfig()
.listenWebpackConfig()
.lwc()

About

A laravel mix extension that allow us to get the webpack config as an object and with a second argument that provide the circularStringify function that help with stringification. So we do whatever we want with it. Including writing to files. Unlike dump() component. The extension does patch dump() and dumpWebpackConfig() as well to take that ca…

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published