Comment intégrer WordPress dans Webpack ?

J’ai développé un site web en utilisant HTML/CSS, JavaScript et Sass ou Scss. J’ai utilisé NMP.

Je dois mettre ce site Web dans WordPress. J’ai déjà installé WordPress et placé ce dossier avec tous mes actifs (HTML/CSS, JS, Sass, etc.) dans le dossier du thème.

Maintenant, qu’est-ce que je fais maintenant ? Comment brancher tout ça ?

Je sais que c’est possible parce que j’ai déjà travaillé sur un site comme celui-ci au travail, mais je ne sais pas comment le faire à partir de zéro.

Webpack -> WordPress. Je regarderai les fichiers avec NPM ou webpack, mais l’hébergement se fera avec MAMP – c’est comme ça que je l’ai fait au travail de toute façon.

Que devrais-je faire?

Voici le code du site Web s’il y a lieu : https://github.com/AurelianSpodarec/lovetocodefinal

PS, pas d’API WordPress ou quoi que ce soit du genre, mais comme je l’ai écrit ci-dessus.

Solution n°1 trouvée

Vieille question, mais je viens d’avoir la même moi-même. Je viens de construire un démarreur WordPress-Webpack léger. Vous pouvez l’utiliser pour créer des thèmes WordPress et il construira Scss et copiera PHP, etc. dans la destination de vos thèmes. Il utilise Browsersync pour un développement plus facile. Vous avez une séparation complète du développement et de la construction 🙂 Peut-être que cela peut encore aider à l’avenir. Cordialement, Fabien

Lien : https://github.com/fabiankuhn/webpack-wordpress

Extrait de la configuration principale de la construction (chemins) :

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',

  },

Extrait de la configuration du pack Web WordPress :

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 } },
        ],
      },
    ],
  },
});

Solution n°2 trouvée

J’ai trouvé une solution à cela.

C’est simple. Vous devez tout compiler et le mettre dans les dossiers qui seront utilisés par WordPress et faire de la magie WordPress pour obtenir les styles avec des fonctions.

Je l’ai fait ici : https://github.com/AurelianSpodarec/Webpack-to-WordPress-Starting-Template

Ce n’est pas parfait, mais c’est un bon point de départ pour ceux qui cherchent à utiliser Webpack avec WordPress.