如何将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集成到Webpack（）】我找到了解决方案。
这很简单。你需要编译所有内容并将其放在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 Debugplugins: [ // 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 } }, ], }, ], }, });