使用webpack-dev-server和HMR
编辑该页面使用webpack-dev-server和HMR
在开发,而不是使用纱安可dev -手表
,你可以使用webpack-dev-server:
1 2 3 4 5
#如果你用纱包管理器美元纱安可dev-server#如果你使用npm包管理器美元npm dev-server运行
这个构建和服务前端资产从一个新的服务器。这个服务器运行localhost: 8080
默认情况下,意义构建资产是可用的localhost: 8080 /构建
。这个服务器不写文件到磁盘;相反,它服务于他们从内存中,允许热模块重新加载。
因此,链接
和脚本
标签需要指向新服务器。如果你使用encore_entry_script_tags ()
和encore_entry_link_tags ()
(或树枝的快捷方式通过entrypoints.json处理你的资产以其它方式),你完成:模板会自动的路径指向开发服务器。
dev-server选项
的dev-server
命令支持所有定义的选项webpack-dev-server。通过命令行选项可以设置这些选项:
1 2 3 4 5
#如果你用纱包管理器美元纱安可dev-server——端口9000#如果你使用npm包管理器美元npm运行dev-server——端口9000
您还可以使用设置这些选项Encore.configureDevServerOptions ()
方法在你的webpack.config.js
文件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/ / webpack.config.js/ /……再来一个/ /…….configureDevServerOptions (选项= >{选项。服务器= {类型:“https”,选项:{关键:“/道路/ / server.key”,cert:“/道路/ / server.crt”}}});
启用HTTPS使用Symfony的Web服务器ob娱乐下载
如果你使用ob娱乐下载Symfony web服务器在本地使用HTTPS,您还需要告诉dev-server使用HTTPS。要做到这一点,您可以重用Symfony web服务器的SSLob娱乐下载证书:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
/ / webpack.config.js/ /……+ const path =要求(“路径”);安可/ /……+ .configureDevServerOptions(选项= > {+选项。服务器= {+类型:“https”,+选项:{+可以:path.join (process.env。家,“.symfob娱乐下载ony5 /证书/ default.p12”),+}+}+})
请注意
如果您使用的是节点。js 17或更新,您必须运行dev-server
命令——openssl-legacy-provider
选择:
1 2 3 4 5
#如果你用纱包管理器美元NODE_OPTIONS =——openssl-legacy-provider纱安可dev-server#如果你使用npm包管理器美元NODE_OPTIONS =——openssl-legacy-provider npm dev-server运行
歌珥问题
如果您遇到问题歌珥(交叉起源资源共享),设置以下选项:
1 2 3 4 5 6 7 8 9 10 11
/ / webpack.config.js/ /……再来一个/ /…….configureDevServerOptions (选项= >{选项。allowedHosts =“所有”;/ /在老年Webpack Dev服务器版本,使用这个选项:/ /选项。防火墙= false;})
注意,这不是一个推荐的安全实践,但是这是需要解决歌珥的问题。
热模块替换HMR
热模块替换是一个超级大国dev-server
在风格和(在某些情况下)JavaScript可以自动更新,而不需要重新加载页面。HMR工作自动与CSS(只要你使用dev-server
和安可1.0或更高版本),但仅适用于一些JavaScript(如Vue.js)。
生活重新加载时修改PHP /树枝文件
利用HMR超级大国生活重新加载您的PHP代码和模板,设置以下选项:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
/ / webpack.config.js/ /……再来一个/ /…….configureDevServerOptions (选项= >{选项。liveReload =真正的;选项。静态= {看:假};选项。看Files = {路径:【“src / * * / * . php”,的模板/ * * / *});})
的static.watch
选择是需要禁用默认的重新加载静态文件的目录,这些文件已经由HMR处理。
1.0.0
安可1.0之前,您需要通过——热
国旗在命令行启用HMR。您还需要禁用CSS提取使HMR CSS。不再需要。