Как перейти с смеси Laravel на чистый Webpack? - PullRequest
Новая
       13

Как перейти с смеси Laravel на чистый Webpack?

1 голос
/ 29 сентября 2019

Учитывая 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 как зависимость от существующего проекта.)

Я нашел этот файл по умолчанию в источнике, но это не помогло мне.Есть ли способ увидеть конфигурацию «скомпилированного / получившегося» веб-пакета или шаблон / начальную точку, соответствующую настройкам по умолчанию для laravel mix?

1 Ответ

1 голос
/ 29 сентября 2019

Файл, на который вы ссылались, похоже, указывает на конфигурацию по умолчанию.Почему это не помогло?

Для миграции вы могли бы

  1. Изучить основы

  2. Извлечь зависимости от Laravel mix и добавьте их в ваш пакет. 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. Минимальный пример конфигурации веб-пакетадля вашего примера выше микс будет 
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'
        ]
      }
    ]
  }
};
Изучите более продвинутые основы для вашего варианта использования
...