如何从 laravel mix 迁移到纯 Webpack？答案

【问题标题】：How to migrate from laravel mix to pure Webpack?如何从 laravel mix 迁移到纯 Webpack？
【发布时间】：2020-01-28 21:58:47
【问题描述】：

鉴于新 Laravel 项目的 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 作为对现有项目的依赖。）

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

【问题讨论】：

标签： laravel webpack laravel-mix

【解决方案1】：

可以，但是效果不是很理想。

用这个创建一个 JS 脚本：

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

并将其保存在 laravel 项目的根文件夹中。使用 Node 运行它，输出将是 Laravel Mix 接收和输入到 webpack 的配置对象。

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

【讨论】：

当我第一次尝试时，它给出了与 BrowserSync 相关的错误，但在评论 BrowserSync 配置后它起作用了，谢谢！

【解决方案2】：

只要放入 webpack.mix.js

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

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

【讨论】：

【解决方案3】：

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

为了迁移你可以

Learn the basics
从 Laravel 中提取 dependencies mix aǹd 将它们添加到你的 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。
上面的 mix 示例的 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'
        ]
      }
    ]
  }
};

了解more advanced basics for your use case

【讨论】：

如果您需要使用 Vue，here 解释了如何使其工作。此外，如果您只有 css 入口点，您可能需要 webpack remove empty scripts 插件。

【解决方案4】：

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

【讨论】：