如何从 laravel mix 迁移到纯 Webpack？

Question

鉴于新webpack.mix.js项目的 webpack.mix.js ：

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');

仅使用 webpack 和webpack.config.js的等价物是什么？ （我希望删除 laravel mix 作为对现有项目的依赖。）

我确实在源代码中找到了这个默认文件，但它对我没有帮助。 有没有办法可以看到“编译/生成”webpack 配置或对应于 laravel 混合默认设置的模板/起点？

Answer 1

可以，但结果不是很满意。

用这个创建一个 JS 脚本：

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

并将其保存在 laravel 项目的根文件夹中。 使用 Node 运行它，output 将是配置 object Laravel 混合接收和输入到 Z424516CA53B4AD4BEF837ED04

但是，此文件非常长，并且包含大量设置，如果您从头开始制作文件，则不需要这些设置。 是的，您可以尝试删除您认为可以在不破坏 output 的情况下删除的所有额外设置，但最后最好了解 Webpack 的工作原理，这样您就可以编写更好的模式调整配置。 至少你可以用它来理解它是如何做某些事情的。

Answer 2

只需放入 webpack.mix.js

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

因此，您将从 laravel.mix 中获得 webpack 配置。

Answer 3

您引用的文件似乎完全指向默认配置。 为什么这没有帮助？

为了迁移你可以

1. 学习基础知识

2. 从 Laravel 中提取依赖项并将它们混合并添加到您的 package.json

   • 提示：那里的dependencies项是你的devDependencies
   • 首先安装npm install --save-dev一切“webpack”，“babel”并以“-loader”为前缀。
   • 如果您需要 Sass 并提取 css - npm install --save-dev node-sass sass-loader mini-css-extract-plugin 。
3. 上面的混合示例的 webpack 配置的最小示例是

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. 为您的用例了解更高级的基础知识

Answer 4

使用最近的 laravel-mix，您只需要调用mix.dump() （在webpack.mix.js脚本中）。