使用webpack-dev-server和HMR

编辑该页面

警告:你浏览的文档欧宝体育电话欧宝娱乐app下载地址Symfony 5.2,不再维护。

这个页面的更新版本Symf欧宝娱乐app下载地址ony 6.2(当前的稳定版本)。

使用webpack-dev-server和HMR

在开发,而不是使用纱安可dev -手表,你可以使用webpack-dev-server:

1
美元纱安可dev-server

这个构建和服务前端资产从一个新的服务器。这个服务器运行localhost: 8080默认情况下,意义构建资产是可用的localhost: 8080 /构建。这个服务器不写文件到磁盘;相反,它服务于他们从内存中,允许热模块重新加载。

因此,链接脚本标签需要指向新服务器。如果你使用encore_entry_script_tags ()encore_entry_link_tags ()(或树枝的快捷方式通过entrypoints.json处理你的资产以其它方式),你完成:模板会自动的路径指向开发服务器。

dev-server选项

谨慎

安可使用webpack-dev-server版本4,安可的时候的1.0版本还在测试阶段,没有记录。看到4.0更新日志的变化。

dev-server命令支持所有定义的选项webpack-dev-server。通过命令行选项可以设置这些选项:

1
美元纱安可dev-server——端口9000

您还可以使用设置这些选项Encore.configureDevServerOptions ()方法在你的webpack.config.js文件:

1 2 3 4 5 6 7 8 9 10 11 12 13
/ / webpack.config.js/ /……再来一个/ /…….configureDevServerOptions (选项= >{选项。https = {关键:“/道路/ / server.key”,cert:“/道路/ / server.crt”}});

0.28.4

Encore.configureDevServerOptions ()介绍了安可0.28.4方法。

启用HTTPS使用Symfony的Web服务器欧宝娱乐app下载地址

如果你使用欧宝娱乐app下载地址Symfony web服务器在本地使用HTTPS,您还需要告诉dev-server使用HTTPS。要做到这一点,您可以重用Symfony web服务器的SSL欧宝娱乐app下载地址证书:

1 2 3 4 5 6 7 8 9 10 11 12
/ / webpack.config.js/ /……+ const path =要求(“路径”);安可/ /……+ .configureDevServerOptions(选项= > {+选项。https = {+可以:path.join (process.env。家,“.symf欧宝娱乐app下载地址ony /证书/ default.p12”),+}+})

谨慎

一定要通过——https国旗在命令行运行时安可dev-server。这个标志需要在1.0之前,但现在将导致您的配置被改写。

歌珥问题

如果您遇到问题歌珥(交叉起源资源共享),设置以下选项:

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)。

1.0.0

安可1.0之前,您需要通过——热国旗在命令行启用HMR。您还需要禁用CSS提取使HMR CSS。不再需要。

这项工作,包括代码示例,许可下Creative Commons冲锋队3.0许可证。