如何从 laravel 混合迁移到纯 Webpack？

Question

鉴于 webpack.mix.js 一个新的 Laravel 项目：

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 默认文件，但它对我没有帮助。有没有办法让我看到 "compiled/resulting" webpack 配置或 template/starting 对应于 laravel 混合默认设置的点？

Answer 1

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

要迁移，您可以

Learn the basics
从 Laravel 中提取 dependencies 混合并将它们添加到您的 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.
上面混合示例的 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

Answer 2

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

用这个创建一个 JS 脚本：

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

并将其保存在 laravel 项目的根文件夹中。运行它与 Node 一起输出将是配置对象 Laravel 混合接收和输入到 webpack。

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

Answer 3

刚刚投入webpack.mix.js

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

因此您将从 laravel.mix.

获取 webpack 配置

Answer 4

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

如何从 laravel 混合迁移到纯 Webpack？

How to migrate from laravel mix to pure Webpack?

laravel

webpack

laravel-mix