如何从 laravel mix 迁移到纯 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?

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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