Ставить скрипт в WordPress при выполнении HMR Webpack-Dev-Server - PullRequest
Новая
       20

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

0 голосов
/ 24 декабря 2018

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

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

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

1 Ответ

0 голосов
/ 26 декабря 2018

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

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

my 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()]
};

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

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

my functions.php (extract) 

<?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-server .Если эта строка отсутствует, загружается файл bundle.js из корня каталога темы.

my wp-config.php (extract) 

define('WP_ENVIRONMENT', 'development');
...