如何从Laravel Mix迁移至纯Webpack？求等价配置及查看方法

Great question! Let's break this down into two parts: creating an equivalent pure Webpack config, and how to inspect Laravel Mix's underlying Webpack settings.

1. Equivalent webpack.config.js for Your Laravel Mix Setup #

Your original Laravel Mix config does two core things: compiles your app.js (with Babel transpilation) and compiles app.scss into a standalone CSS file, outputting both to the public directory. Here's the pure Webpack equivalent:

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

module.exports = {
  // Match Mix's entry point
  entry: './resources/js/app.js',
  
  // Match Mix's output directory and filenames
  output: {
    filename: 'js/app.js',
    path: path.resolve(__dirname, 'public'),
    clean: true // Mimic Mix's default behavior of cleaning the output folder
  },

  module: {
    rules: [
      // Handle JavaScript with Babel (matches Mix's default Babel setup)
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },

      // Compile Sass/SCSS to standalone CSS file
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader, // Extract CSS to file (instead of inline)
          'css-loader', // Resolve CSS imports
          'sass-loader' // Compile Sass to CSS
        ]
      }
    ]
  },

  plugins: [
    // Output CSS to the correct path
    new MiniCssExtractPlugin({
      filename: 'css/app.css'
    })
  ],

  // Match Mix's default resolve settings
  resolve: {
    extensions: ['.js', '.json'],
    alias: {
      // Optional: Add Mix's default `@` alias for resources/js
      '@': path.resolve(__dirname, 'resources/js')
    }
  },

  // Auto-set mode based on NODE_ENV (like Mix does)
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
};

To use this, you'll need to install the required dependencies first:

npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env css-loader sass-loader sass mini-css-extract-plugin --save-dev

2. Inspect Laravel Mix's Generated Webpack Config #

If you want to see exactly what Webpack config Laravel Mix generates under the hood, you have a couple of easy options:

• Use the mix inspect command: Run this in your project root:

  npx mix inspect
  

  This will print the full generated Webpack config to your terminal. You can also target specific parts with flags, like mix inspect --rules to see all loader rules, mix inspect --plugins for plugins, or mix inspect --entry for entry points.

• Dump the config directly from your mix file: Add mix.dump(); to your webpack.mix.js, then run npx mix. The full Webpack config will be printed to the console. If you want to save it to a file, you can redirect the output:

  npx mix > webpack-config-dump.txt
  

For a deeper dive into Mix's default settings, you can also check its source code directly—look in node_modules/laravel-mix/src/config.js for all the base configurations Mix uses as a starting point.

内容的提问来源于stack exchange，提问作者ajthinking