如何将WordPress集成到Webpack？

我使用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或类似的东西, 但正如我上面所写。

#1

我找到了解决方案。

这很简单。你需要编译所有内容并将其放在WordPress将使用的文件夹中, 并进行WordPress魔术处理以获取具有功能的样式。

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

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

#2

老问题, 但我自己也有一个。我刚刚构建了一个轻量级的Wordpress-Webpack启动器。你可以使用它来构建Wordpress-Themes, 它将构建Scss并将PHP等复制到主题的目标位置。它使用Browsersync进行更轻松的开发。你将dev和build完全分开了：)也许将来仍然可以。问候, 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 } }, ], }, ], }, });