How to migrate from laravel mix to pure Webpack?

Question

Given the webpack.mix.js of a fresh Laravel project :

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

What is the equivalent using just webpack and a webpack.config.js? (Im looking to remove laravel mix as a dependency on an existing project.)

I did find this default file in the source but it did not help me. Is there a way I can see the "compiled/resulting" webpack configuration or a template/starting point that corresponds to laravel mix default settings?

Ecru

Answer 1

With recent laravel-mix you just need to invoke mix.dump() (in the webpack.mix.js script).

Chestnut

Answer 2

You can, but the result is not very satisfactory.

Create a JS script with this:

console.log (JSON.stringify(
    require('./node_modules/laravel-mix/setup/webpack.config.js'), null, 4)
);

and save it in the root folder of your laravel project. Run it with Node and the output will be the configuration object Laravel Mix receives and inputs to webpack.

However, this file is very long and covers a vast amount of settings, which you wouldn't need if you made your file from scratch. Yes, you could try and remove every extra setting you think you can remove without breaking your output, but in the end it's better to learn how Webpack works so you can write better, mode adjusted configs. At least you can use it to understand how it does certain things.

Oberon

When I first tried, it gave en error related to BrowserSync, but after commenting the BrowserSync configuration it worked, thanks! – Cinerary

Answer 3

Just put into webpack.mix.js

Mix.listen('configReady', function (config) {
  RegExp.prototype.toJSON = RegExp.prototype.toString;
  console.log(JSON.stringify(config));
});

So you will get webpack config from your laravel.mix.

Notepaper

Answer 4

The file you referenced seems to point exactly to the default configuration. Why did this not help?

In order to migrate you could

1. Learn the basics

2. Extract the dependencies from Laravel mix aǹd add them to your package.json

   • Hint: The dependencies there are your devDependencies
   • Start by installing npm install --save-dev everything "webpack", "babel" and prefixed with "-loader".
   • If you need Sass and extracted css - npm install --save-dev node-sass sass-loader mini-css-extract-plugin.
3. Minimal example of a webpack config for your mix example from above would be

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './resources/js/app.js',
  output: {
    filename: 'js/[name].js',
    path: path.join(__dirname, 'public')
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
};

4. Learn the more advanced basics for your use case

Agrology

If you need to work with Vue, here is an explanation on how you can make it work. Also if you have css only entry points you might need the webpack remove empty scripts plugin. – Cinerary