Question

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

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

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

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

Webpack - ＆gt; WordPress的。我将使用NPM或webpack观看文件，但主持人将使用MAMP - 这就是我在工作中如何做到这一点。

我该怎么办？

这是网站代码：https://github.com/AurelianSpodarec/lovetocodefinal

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

Answer 1

我找到了解决方法。

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

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

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

Answer 2

旧问题，但我自己也有一个。我刚刚构建了一个轻量级的Wordpress-Webpack启动器。您可以使用它构建Wordpress-Themes，它将构建Scss并将PHP等复制到主题的目标位置。它使用Browsersync来简化开发。您已将开发人员和构建人员完全分开了：）也许将来仍然可以提供帮助。此致Fabian

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

如何将WordPress集成到Webpack中？

2 个答案: