WordPress插件开发：Webpack编译CSS的url()路径异常问题

具备Laravel、Symfony、VueJS、Angular开发经验，刚接触WordPress插件开发。为个人小项目开发插件时，尝试用Laravel Mix（基于Webpack）编译VueJS和CSS，遇到路径问题：安装的部分Node包的CSS中用相对路径的url()引用字体文件（如node_modules/primeicons/primeicons.css通过url(./fonts/primeicons.ttf)引用同目录fonts文件夹内的字体），但编译后页面尝试从域名根目录domain.com/fonts/加载资源，导致404加载失败。希望插件完全独立于WordPress主题，求通过Webpack/Mix正确编译插件CSS与字体文件的方法。

相关代码示例 #

main.css

@import "~bootstrap";
@import "~primevue/resources/themes/saga-blue/theme.css";
@import "~primevue/resources/primevue.min.css";
@import "~primeicons/primeicons.css";
@import '~@fortawesome/fontawesome-pro/css/all.css';

node_modules/primeicons/primeicons.css

@font-face {
  font-family: 'primeicons';
  font-display: block;
  src: url('./fonts/primeicons.eot');
  src: url('./fonts/primeicons.eot?#iefix') format('embedded-opentype'), url('./fonts/primeicons.ttf') format('truetype'), url('./fonts/primeicons.woff') format('woff'), url('./fonts/primeicons.svg?#primeicons') format('svg');
  font-weight: normal;
  font-style: normal;
}

webpack.mix.js

let mix = require('laravel-mix');

mix
  .js('assets/js/main.js', 'build')
  .sass('assets/css/main.scss', 'build')
  .setPublicPath('dist')
  .copyDirectory('assets/img', 'dist/build/img')
  .vue({ version: 3 })
;

控制台报错 #

尝试从domain.com/fonts/primeicons.ttf等路径加载字体文件，返回404错误。

解决方案 #

1. 配置Laravel Mix的资源根路径 #

Laravel Mix的setResourceRoot方法用于指定编译后资源的根URL，需要对应WordPress插件的实际部署路径。修改webpack.mix.js，添加setResourceRoot：

let mix = require('laravel-mix');
// 替换为你的插件目录名，比如"my-custom-plugin"
const pluginSlug = 'my-custom-plugin';

mix
  .js('assets/js/main.js', 'build')
  .sass('assets/css/main.scss', 'build')
  .setPublicPath('dist')
  .setResourceRoot(`/wp-content/plugins/${pluginSlug}/dist/build/`)
  .copyDirectory('assets/img', 'dist/build/img')
  .vue({ version: 3 })
;

该配置会让编译后的CSS中url()引用的资源路径自动加上插件的根路径，避免从域名根目录加载。

2. 自定义Webpack字体文件处理规则 #

通过webpackConfig方法配置file-loader，指定字体文件的输出目录和公共路径，确保字体被正确复制到插件的dist目录，并且CSS中的引用路径正确：

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'build/fonts/', // 字体输出到dist/build/fonts
              publicPath: `/wp-content/plugins/${pluginSlug}/dist/build/fonts/`
            }
          }
        ]
      }
    ]
  }
});

3. 手动复制第三方字体文件（可选） #

如果自动处理不生效，可以直接复制Node包中的字体文件到插件的dist目录：

// 复制PrimeIcons字体
mix.copyDirectory('node_modules/primeicons/fonts', 'dist/build/fonts');
// 复制FontAwesome字体（根据实际包路径调整）
mix.copyDirectory('node_modules/@fortawesome/fontawesome-pro/webfonts', 'dist/build/fonts');

4. 在WordPress插件中正确加载资源 #

使用WordPress官方函数wp_enqueue_style和wp_enqueue_script加载编译后的资源，确保路径正确且插件独立于主题：

// 在插件主文件中添加
function my_plugin_enqueue_assets() {
  $plugin_url = plugin_dir_url(__FILE__);
  
  // 加载CSS
  wp_enqueue_style(
    'my-plugin-styles',
    $plugin_url . 'dist/build/main.css',
    [],
    filemtime(plugin_dir_path(__FILE__) . 'dist/build/main.css') // 添加版本号避免缓存
  );
  
  // 加载JS
  wp_enqueue_script(
    'my-plugin-scripts',
    $plugin_url . 'dist/build/main.js',
    ['wp-element'], // 如果依赖Vue，可根据实际情况调整
    filemtime(plugin_dir_path(__FILE__) . 'dist/build/main.js'),
    true // 在页脚加载
  );
}
add_action('wp_enqueue_scripts', 'my_plugin_enqueue_assets');

内容的提问来源于stack exchange，提问作者Speedy059