Site Loader

Устанавливаем необходимые пакеты:

npm i -D @babel/core @babel/plugin-proposal-class-properties @babel/preset-env babel-loader mini-css-extract-plugin webpack webpack-cli webpack-dev-server css-loader

Устанавливаем пакеты для tailwindcss:

npm i -D tailwindcss@latest postcss@latest autoprefixer@latest postcss-loader postcss-preset-env

Устанавливаем плагин BrowserSync для Webpack. Он нужен для обновления php файлов темы WordPress в режиме development:

npm i -D browser-sync-webpack-plugin

Если необходимо, установите alpinejs:

npm i -D aplinejs

Конфиг webpack.config.js:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/i,
        include: path.resolve(__dirname, 'src'),
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-class-properties']
          },
        },
      },
      {
        test: /\.css$/i,
        exclude: /node-modules/,
        include: path.resolve(__dirname, 'src'),
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader"
          },
          {
            loader: "postcss-loader"
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.bundle.css'
    }),
    new BrowserSyncPlugin(
      {
        proxy: 'https://localaddress:8890/',
        files: [
          {
            match: [
              '**/*.php'
            ],
            fn: function(event, file) {
              if (event === "change") {
                const bs = require('browser-sync').get('bs-webpack-plugin');
                bs.reload();
              }
            }
          }
        ]
      },
      {
        reload: false
      })
  ],
  devServer: {
    proxy: {
      '/': {
        target: {
          host: "localaddress",
          protocol: "https:",
          port: 8890
        },
        changeOrigin: true,
        secure: true
      }
    }
  },
}

Добавляем в файл /src/styles.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Создаем файл tailwind.config.js запустив команду:

npx tailwindcss init

И добавляем в него:

module.exports = {
  purge: [
    './src/**/*.css',
    './dist/*.html',
    './*.php',
    './template-parts/**/*.php',
    './dist/*.js'
    ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      backgroundColor: ['active'],
    },
  },
  plugins: [],
}

Создаем файл postcss.config.js и добавляем в него:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
}

Запускаем dev mode и работаем:

npm run dev

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *