如何将 WordPress 集成到 Webpack 中？答案

【问题标题】：How to integrate WordPress into Webpack?如何将 WordPress 集成到 Webpack 中？
【发布时间】：2018-05-17 04:05:52
【问题描述】：

我使用 HTML/CSS、JavaScript 和 Sass 或 Scss 开发了一个网站前端。我使用了 NPM。

我需要将该网站放入 WordPress。我已经安装了 WordPress 并将该文件夹与我的所有资产（HTML/CSS、JS、Sass 等）放入主题文件夹中。

现在，我该怎么办？我如何连接所有这些？

我知道这是可能的，因为我以前在这样的网站上工作过，但不知道如何从头开始。

Webpack -> WordPress。我将使用 NPM 或 webpack 观看文件，但托管将使用 MAMP 进行 - 反正我在工作中就是这样做的。

我该怎么办？

如果有的话，这是网站代码：https://github.com/AurelianSpodarec/lovetocodefinal

PS，没有 WordPress API 或任何类似的东西，但就像我上面写的那样。

【问题讨论】：

WordPress REST API: developer.wordpress.org/rest-api 在 WordPress 端一个 $.ajax 或 es6 承诺在你的前端从 WordPress api 端点请求数据。

标签： wordpress webpack wordpress-theming frontend

【解决方案1】：

老问题，但我自己也有同样的问题。我刚刚构建了一个轻量级的 Wordpress-Webpack 启动器。您可以使用它来构建 Wordpress-Themes，它将构建 Scss 并将 PHP 等复制到您的主题的目的地。它使用 Browsersync 来简化开发。您已经完全分离了开发和构建 :) 也许这在未来仍然会有所帮助。问候，费边

链接：https://github.com/fabiankuhn/webpack-wordpress

从主构建配置（路径）中提取：

const themeName = 'test-theme'
const themePath = '/Users/<Username>/<repos>/Test/webpack/wordpress/wp-content/themes'


/*
 * Main Config
 */ 

module.exports = {
  entry: './webpack-entry.js', // Main Entry: Is included in functions.php
  output: {
    filename: 'main.js', // Is included in functions.php

    // Set Path of Wordpress Themes ('.../wp-content/themes') as absolute Path
    path: themePath + '/' + themeName + '/assets',

  },

从 Wordpress webpack 配置中提取：

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')

// This Config Exports the FIles with Source Maps for Wordpress Development
module.exports = merge(common, {

  mode: 'development',
  devtool: 'inline-source-map', // Use Source-Maps for Debug

  plugins: [
  // Plugin to Reload Browser According to Proxy 127.0.0.1:8080 (Wordpress PHP)
  new BrowserSyncPlugin({
      host: 'localhost',
      port: 3000,
      proxy: '127.0.0.1:8080',
      files: [
        {
          match: [
            '**/*.php',
            '**/*.js',
            '**/*.css',
          ],
        },
      ],
      notify: false,
    },
    {
      reload: true,
    }),

    // Extract CSS
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),

    // Copy all Files to Entry Output Path except Github, Webpack and 
    // Original Sources (Before Webpack Processing)
    new CopyPlugin([
      {
        from: '../',
        to: '../',
        ignore: [
          '_webpack/**',
          'assets/**',
          '.git/**',
        ],
      },
    ]),
  ],
  module: {
    rules: [
      {
        // Listen for Sass and CSS
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
            },
          },
          // Source Map shows Path in Chrome for Testing
          { loader: 'css-loader', options: { sourceMap: true, importLoaders: 1 } },
          { loader: 'sass-loader', options: { sourceMap: true } },
        ],
      },
    ],
  },
});

【讨论】：

【解决方案2】：

我找到了解决方案。

这很简单。您需要编译所有内容并将其放入 WordPress 将使用的文件夹中，并使用 WordPress 魔术来获取具有功能的样式。

我在这里做了这个：https://github.com/AurelianSpodarec/Webpack-to-WordPress-Starting-Template

它并不完美，但对于那些希望将 Webpack 与 WordPress 一起使用的人来说，这是一个很好的起点。

【讨论】：