如何在Symfony项目中设置webpack encore的实时重新加载

Question

我用给定的命令symfony new app --webapp创建了一个Symfony完整的web应用程序。它附带了配置了webpack-encore的Webpack。我可以用npm run watch编译我的资产。但是当我进行更改时，浏览器不会自动重新加载。根据Symfony的官方文档，我尝试过webpack-dev-server，但没有成功。

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();

package.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"
}
}

Answer 1

您可以在Browsersync的帮助下，在Symfony项目中使用webpack-encore设置实时重新加载。仔细遵循以下步骤，你就可以开始了。

1. 第一步：

npm i browser-sync-webpack-plugin browser-sync 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/*.css"],
},
],
notify: false,
},
{
reload: true,
}
))
;
module.exports = Encore.getWebpackConfig();

3. 在.env中添加以下行(url应该是运行symfony serve时获得的url(：

# The url should be the one you get when you run symfony serve
PROXY=http://127.0.0.1:8000/

4. 在项目根文件夹中打开一个终端并运行：

symfony serve

5. 在项目根文件夹中打开第二个终端并运行：

npm run watch

Answer 2

Id建议使用webpack内置的liveReload。

您可以使用--live-reload标志在encore中启用它
例如encore dev-server --live-reload

要运行开发服务器，您需要运行npm run dev-server而不是npm run watch

实时重新加载trick.php文件更改

如果要重新加载分支更改，可以使用webpack.devServer.watchFiles.paths
请参阅https://webpack.js.org/configuration/dev-server/#devserverwatchfiles

我没有确切的语法，但在你的webpack.config.js文件中，你可以

// webpack.config.js
// ...
Encore
// ...
.configureDevServerOptions(options => {
options.watchFiles = {
paths: ['src/**/*.php', 'templates/**/*'],
}
})
;