如何从laravel mix迁移到纯Webpack？

Question

给出一个新的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默认设置的模板/起点？

Answer 1

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

为了迁移，您可以

1. Learn the basics

2. 从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。
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. 了解more advanced basics for your use case