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

【问题标题】：Enqueuing Script in WordPress while doing Webpack-Dev-Server HMR在执行 Webpack-Dev-Server HMR 时在 WordPress 中排队脚本
【发布时间】：2018-12-24 16:09:36
【问题描述】：

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

但是，这样做我无法通过 webpack-dev-server 获得 hot module reloading (hmr)。

谁能给我一个提示或指向我一些文档？

【问题讨论】：

标签： wordpress webpack webpack-hmr

【解决方案1】：

这里没有反应，所以我不得不自己寻找答案。 ? 在这里。

我没有得到的是如何使 webpack-dev-server 仅在内存中可用的 bundle.js 文件，在 functions.php 中使用 wp_enqueue_scripts 可供 WordPress 使用。

我的 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 不可用987654328@ 但在原始 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-server 将它放在其中。如果缺少这一行，它会从主题目录的根目录加载bundle.js 文件。

我的 wp-config.php（摘录）

define('WP_ENVIRONMENT', 'development');

【讨论】：

太棒了……这也是我一直在寻找的……谢谢……节省了很多时间……
它是在动态插入css...？？对我来说，这很好用，但所有 js 或 css 文件更新都会完全重新加载..
您是否尝试过更改 output.publicPath 的值？对我来说，*hot-update.json 文件位于错误的域中，所以我不得不更改 output.publicPath（问题在此处描述：github.com/webpack/webpack-dev-server/issues/1591）

【解决方案2】：

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

【讨论】：