Скрипт постановки в очередь в WordPress при выполнении HMR Webpack-Dev-Server

Я пытаюсь быть хорошим гражданином WordPress ? и правильно использую свой JavaScript через wp_enqueue_scripts в моем functions.php.

Однако, делая это таким образом, я не заставляю горячая перезагрузка модуля (hmr) через webpack-dev-сервер работать.

Может ли кто-нибудь дать мне подсказку или указать на какую-то документацию?

Как убрать количество товаров в категории WooCommerce
Как убрать количество товаров в категории WooCommerce
По умолчанию WooCommerce показывает количество товаров рядом с категорией, как показано ниже.
1
0
1 328
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Никакой реакции здесь нет, поэтому я был вынужден искать ответ сам. ? Вот.

Чего я не понял, так это того, как сделать файл bundle.js, который webpack-dev-сервер делает доступным только в памяти, доступным для WordPress, используя wp_enqueue_scripts в functions.php.

мой webpack.config.js (отрывок)

const webpack = require('webpack');

module.exports = {
  entry: './src/entry.js',
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  devServer: {
    open: true,
    hot: true,
    publicPath: '/',
    proxy: {
      '/': {
        target: 'http://wordpress:8888/',
        changeOrigin: true
      }
    }
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
};

Дело в том, что хотя я проксирую dev-сервер через свой MAMP-сервер, который работает под http://wordpress:8888, файл build.js не доступен через webpack-dev-сервер под http://wordpress:8888/build.js, а под исходным URL-адресом, которым является http://localhost:8080/build.js.

Как только я понял, что условное выражение в functions.php сделало свое дело.

мой functions.php (отрывок)

<?php

// Load my JS
if (!defined('WP_ENVIRONMENT') || WP_ENVIRONMENT == "production") {

  function reactTheme_enque_scripts() {
    wp_enqueue_script(
      'react-theme-js',
      get_stylesheet_directory_uri() . '/bundle.js',
      [], // dependencies could go here
      time(), // version for caching
      true // loading it within footer
    );
  }

} else {

  function reactTheme_enque_scripts() {
    wp_enqueue_script(
      'react-theme-js',
      'http://localhost:8080' . '/bundle.js',
      [], // dependencies could go here
      time(), // version for caching
      true // loading it within footer
    );
  }

}

add_action('wp_enqueue_scripts', 'reactTheme_enque_scripts');

?>

Итак, теперь, просто добавив одну строку в wp-config.php, я могу заставить WordPress искать файл bundle.js, в который его помещает webpack-dev-сервер. Если эта строка отсутствует, он загружает файл bundle.js из корня каталога темы.

мой wp-config.php (отрывок)

define('WP_ENVIRONMENT', 'development');

Потрясающе ... это то, что я тоже искал ... спасибо ... много времени, сэкономленного ..

David 22.02.2020 15:19

Это вставка css на лету ... ?? для меня это работает нормально, но полная перезагрузка происходит для всех обновлений файлов js или css ..

David 23.02.2020 10:17

Вы пробовали изменить значение output.publicPath? Для меня файлы * hot-update.json находились не в том домене, поэтому мне пришлось изменить output.publicPath (проблема описана здесь: github.com/webpack/webpack-dev-server/issues/1591)

Víctor 14.07.2020 18:28

Я разместил для вас возможный ответ здесь: https://stackoverflow.com/a/59196318/12297696. Это установка Webpack для Wordpress dev. Сообщите мне, сработало ли это. С Уважением

Другие вопросы по теме