有没有办法正确地实现 Webpack Dev 服务器代理到 wordpress？

Posted 2023-02-22

【中文标题】有没有办法正确地实现 Webpack Dev 服务器代理到 wordpress？

【英文标题】：Is there a way to achieve that Webpack Dev server proxy to wordpress properly?

【发布时间】：2022-01-16 00:40:54

【问题描述】：

我已经看过一些关于它的帖子，但是使用 Webpack 5 或许它可以在没有旧问题的情况下完成。 需要是基本的；使用 webpack Dev server 和 HMR 进行 WordPress 开发。而不是使用 browsersync 重新加载。

实际上，过去有一个名叫克里斯蒂安的人在此浪费了实时时间。但我无法评论该答案，因为我没有足够的代表发表评论......

WordPress redirecting to siteurl when accessed via webpack-dev-server proxy

有没有办法或者值得在开发服务器上而不是浏览器同步上投入时间？ 也接受任何其他解决方案。就像 rollup 或 parcel 是否有类似的选项或 snowpack 一样。

【问题讨论】：

链接到“Christian 的帖子”会有所帮助。

我为你更新了;)

谢谢你:)

我真的无法解决这个问题，因为我没有您正在使用的特定堆栈，但我想知道 webpack encore 是否可以提供开发和管理的替代方案可以减轻对 webpack 的依赖的资产（同时仍在使用它）。

【参考方案1】：

我将描述我是如何做到的，有很多方法可以解决这个问题，但我开发的方法对我有用，但这并不意味着它对你有用。不幸的是，它基于 browsersync 但适用于 webpack 5 ;)

首先我有一个配置文件夹，其中包含 webpack.common.js、webpack.dev.js 和 webpack.prod.js 文件。

我只会描述开发版本 - webpack.dev.js

const path = require('path');
const webpack = require('webpack');
const  merge  = require('webpack-merge');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const baseConfig = require('./webpack.common.js');

const buildMode =
  process.env.NODE_ENV === 'production' ? 'production' : 'development';
const  cssLoaders  = require('./util');

// Configure Dev Server
const configureDevServer = () => 
  return 
    writeToDisk: true,
    port: 3000,
  ;
;

// Configure Css Loader
const configureCssLoader = () => 
  return 
    test: /\.(css|sass|scss)$/,
    use: ['style-loader', ...cssLoaders],
  ;
;

module.exports = merge(baseConfig, 
  mode: 'development',
  target: 'web',
  devtool: 'inline-source-map',
  devServer: configureDevServer(),
  module: 
    rules: [configureCssLoader(buildMode)],
  ,
  plugins: [
    new webpack.DefinePlugin(
      PRODUCTION: JSON.stringify(false),
    ),
    new BrowserSyncPlugin(
      
        watchOptions: 
          aggregateTimeout: 200,
          poll: 1000,
        ,
        proxy: 'http://localhost',
        files: [
          './wordpress/wp-content/themes/MY-TEMPLATE/**/*.php',
          './frontend/**/*.js',
          './frontend/**/*.scss',
        ],
      ,
      
        reload: false,
      
    ),
  ],
);

我将文件保存到磁盘，在我的模板的特定位置，/wordpress/wp-content/themes/MY-TEMPLATE/assets/ 当然，整个环境，基础，wordpress 代表一个 docker。

每个css和js文件都以filename: 'js/[name]-[hash].js'的形式保存，用于生产版本，而用于开发版本filename: 'js/[name].js'

现在最重要的部分是如何在每次文件更改时将新文件下载到 wordpress，无论是 css 还是 js。

我在function.php中有一些php函数

// wordpress/wp-content/themes/MY-TEMPLATE/functions.php

<?php

/**
 * Enqueue scripts and styles.
 */

require get_theme_file_path('/inc/mytemplate_styles_scripts.php');

在这个文件中，我有一个函数，可以根据我们是在生产中还是在本地主机上下载适当的文件，如果是 css，则将它们放在页眉中，如果是 js，则放在页脚中。

/**
 * adding css to head
 */
function kodywig_head_css()

  if ($_SERVER["SERVER_NAME"] !== 'localhost') 
    echo generateLinkOrScript('css', 'share');
  

add_action('wp_head', 'kodywig_head_css', 0);

/**
 * adding js to footer
 */
function kodywig_head_js()

  if (is_singular()) 
    echo generateLinkOrScript('js', 'post');
  
  echo generateLinkOrScript('js', 'share');

add_action('wp_footer', 'kodywig_head_js', 0);

/**
 * match file name
 */
function kodywig_matchFile($partOfName, $folder)

  $handler = get_template_directory() . '/assets/' . $folder;
  $openHandler = opendir($handler);
  while ($file = readdir($openHandler)) 
    if ($file !== '.' && $file !== '..') 
      if (preg_match("/^" . $partOfName . "(.*)" . $folder . "/i", $file, $name)) 
        return $name[0];
      
    
  
  closedir($openHandler);


function generateLinkOrScript($type, $name)

  if ($type == 'css') 
    $nameLocal = $name . '-';
   else 
    $nameLocal = $_SERVER["SERVER_NAME"] != 'localhost' ? $name : $name . '-';
  

  if ($type == 'css') 
    $html = '<link href="' . get_template_directory_uri() . '/assets/' . $type . '/' . kodywig_matchFile($nameLocal, 'css') . '" rel="stylesheet">';
   else 
    $html = '<script defer src="' . get_template_directory_uri() . '/assets/' . $type . '/' . kodywig_matchFile($name, 'js') . '"></script>';
  
  return $html;

每次js、css更改都会生成新文件，上传到wordpress，页面会自动重新加载。

如果您在 Windows 上工作，我建议使用 wsl2 而不是 docker。那么页面的编译和刷新速度非常快。

在这个链接上，你实际上有这个解决方案，它很旧，但已经使用 webpack5 docker-wordpress-xdebug

【讨论】：

首先感谢您的分享。当涉及到 wordpress 时，这是一个很好的方法。因为对 wp 使用正确的方法通常是排队的事情。但我需要问的是，在测试整个设置之前，我们是否在该设置中有 HMR (webpack.js.org/concepts/hot-module-replacement) 还是只是另一种重新加载(F5, CTRL+R) 浏览器的方式？

我不使用 HRM 的原因很简单，我需要在 PHP 更改时也能重新加载页面的东西。

现在我更了解你了。我们无法将内容推送到 html 中，因为 PHP code needs to be run on a server 会输出一些值。为了让它编译我们更新的 php 代码，我们需要通过页面重新加载向服务器发出请求。因此，HMR 不是 PHP 代码的选项。它仅适用于 javascript 和 css。但是在这种情况下，只为 js 和 css 文件实现 HMR 是没有用的。因为如果我们保存一个 .php 文件，我们将丢失应用程序的状态。再次感谢@grzgorz