Question

我正在努力成为一名优秀的WordPress公民，并通过wp_enqueue_scripts中的functions.php正确地包含我的JavaScript。

但是这样做的话，我无法通过 webpack-dev-server 重新加载热模块（hmr）。

有人可以给我提示或指向我一些文档吗？

Answer 1

这里没有反应，所以我被迫自己寻找答案。在这里。

我没有得到的是如何制作bundle.js文件， webpack-dev-server 仅在内存中提供该文件，而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()]
};

问题是：尽管我通过MAMP服务器代理开发服务器，该服务器在http://wordpress:8888下运行，但{strong> webpack-dev-server不能使用build.js文件在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就可以查找{strong> webpack-dev-server 放置其中的bundle.js文件。如果缺少此行，它将从主题目录的根目录加载bundle.js文件。

我的 wp-config.php （摘录）

define('WP_ENVIRONMENT', 'development');

Answer 2

我在这里为您发布了一个可能的答案：https://stackoverflow.com/a/59196318/12297696。这是针对Wordpress开发人员的Webpack设置。让我知道它是否有效。问候

在执行Webpack-Dev-Server HMR时在WordPress中排队脚本

2 个答案: