How to migrate from laravel mix to pure Webpack?

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.

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.

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