[英]Symfony, how to set up live reloading with webpack-encore?
我已经使用给定的命令symfony new app --webapp
创建了一个 Symfony 完整的 Web 应用程序。 它带有配置了webpack webpack-encore
的 Webpack。 我可以使用npm run watch
编译我的资产。 但是当我进行更改时,浏览器不会自动重新加载。 我已经按照 Symfony 的官方文档here尝试了 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();
包.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"
}
}
这是在 Symfony 项目中使用webpack-encore
设置实时重新加载的方法。
npm i browser-sync-webpack-plugin browser-sync dotenv --save-dev
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();
.env
中添加以下行(该 url 应该是您在制作symfony serve
时获得的那个):# the url should be the one you get when you make symfony serve
PROXY=http://127.0.0.1:8000/
symfony serve
npm run watch
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.