How to migrate from laravel mix to pure Webpack?

问题

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?

回答1:

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

In order to migrate you could

Learn the basics
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.
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'
        ]
      }
    ]
  }
};

Learn the more advanced basics for your use case

回答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.

回答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.

来源：https://stackoverflow.com/questions/58153788/how-to-migrate-from-laravel-mix-to-pure-webpack

标签

laravel

Webpack

laravel-mix