运行 webpack-encore dev-server - 配置以在观看主题文件的同时提供整个 wordpress

问题描述

我刚开始使用 webpack(-encore)，目前正在尝试将 symfony/webpack-encore 作为节点包集成到 Wordpress 主题中。

在主题内安装和运行以下命令没有任何问题：

• yarn encore dev
• yarn encore dev --watch（需要在浏览器窗口中手动刷新）
• yarn encore production

文件由functions.php 中的foreach 循环从entrypoints.json 生成和排队。 所以就像我说的，这个运行得很好。

但是以 yarn encore dev-server 开头的开发服务器正在监视/提供错误的位置。

Wordpress 在本地域上运行，而不是 localhost (http://www.wordpress.test) 并且开发服务器应该在 http://www.wordpress.test:8080（或任何其他端口）上为整个 Wordpress 提供服务 目前，它只是为我的 /dist 文件夹提供服务，其中已编译的 JS 和 CSS 文件所在的位置。

我的 webpack.config.js 文件，几乎是从 Symfony documentation 复制粘贴的标准：

const Encore = require('@symfony/webpack-encore');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('dist/')

    // public path used by the web server to access the output path
    .setPublicPath('http://www.wordpress.test')

    // only needed for CDN's or sub-directory deploy
    .setManifestKeyPrefix('.')

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */
    .addEntry('theme','./assets/theme.js')
    //.addEntry('page1','./assets/page1.js')
    //.addEntry('page2','./assets/page2.js')

    // When enabled,Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()

    // will require an extra script tag for runtime.js
    // but,you probably want this,unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features,see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // enables Sass/SCSS support
    .enableSassLoader()

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // uncomment to get integrity="..." attributes on your script & link tags
    // requires WebpackEncoreBundle 1.4 or higher
    //.enableIntegrityHashes(Encore.isProduction())

    // uncomment if you're having problems with a jQuery plugin
    //.autoProvidejQuery()

    // uncomment if you use API Platform Admin (composer require api-admin)
    //.enableReactPreset()
    //.addEntry('admin','./assets/admin.js')
;

module.exports = Encore.getWebpackConfig();

所以现在的问题是，我如何配置 webpack，使其在观看和刷新主题文件的同时为整个 wordpress 网站提供服务？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）