我用給定的命令創建了一個 Symfony 完整的網路應用程式symfony new app --webapp。它帶有配置了webpack-encore. 我可以使用npm run watch. 但是，例如，當我的 css 更改時，瀏覽器不會自動重新加載。我曾嘗試在此處webpack-dev-server遵循 Symfony 的官方檔案，但沒有奏效。

webpack.config.js（我剛剛洗掉了評論）：

const Encore = require('@symfony/webpack-encore');
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/app.js')
    .enableStimulusBridge('./assets/controllers.json')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })
;
module.exports = Encore.getWebpackConfig();

包.json：

{
    "devDependencies": {
        "@hotwired/stimulus": "^3.0.0",
        "@symfony/stimulus-bridge": "^3.0.0",
        "@symfony/webpack-encore": "^1.7.0",
        "core-js": "^3.0.0",
        "regenerator-runtime": "^0.13.2",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }
}

uj5u.com熱心網友回復：

1.解決方案

這是使用 webpack-encore 和 Symfony 設定熱多載的方法。

1. 第一步：

npm i browser-sync-webpack-plugin dotenv --save-dev

2. 編輯webpack.config.js（有要添加的行的注釋）：

const Encore = require('@symfony/webpack-encore');
require("dotenv").config(); // line to add
const BrowserSyncPlugin = require("browser-sync-webpack-plugin"); // line to add
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/app.js')
    .enableStimulusBridge('./assets/controllers.json')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // entry to add 
    .addPlugin(new BrowserSyncPlugin(
        {
            host: "localhost",
            port: 3000,
            proxy: process.env.PROXY,
            files: [
                {
                    match: ["src/*.php"],
                },
                {
                    match: ["templates/*.twig"],
                },
                {
                    match: ["assets/*.js"],
                },
                {
                    match: ["assets/*.scss"],
                },
            ],
            notify: false,
        },

        {

            reload: true,
        }
    ))

;

module.exports = Encore.getWebpackConfig();

3. 在您的內部添加以下行.env（網址應該是您在制作時獲得的網址symfony serve）：

PROXY=http://127.0.0.1:8000/

4. 在專案檔案夾中打開一個終端并輸入：

symfony serve

5. 在專案檔案夾中打開第二個終端并輸入：

npm run watch

2. 故障排除

如果它不作業，這里你應該做什么：

• 確保女巫port使用的BrowserSyncPlugin當前3000沒有在其他地方使用，否則請隨意更改。
• 確保輸入的網址與您輸入時PROXY獲得的網址.env相同symfony serve。

標籤：php 交响乐 网页包 webpack-encore

上一篇：CKEditor配置“微”不存在

下一篇：Java是否只評估一次宣告為Final的變數？