使用 webpack-dev-server 和 HMR

编辑此页

在开发时，与其使用 npx encore dev --watch，你可以使用 webpack-dev-server

        1
        $ npm run dev-server
    

这会从一个新的服务器构建并提供前端资源。此服务器默认在 localhost:8080 运行，意味着你的构建资源在 localhost:8080/build 可用。此服务器实际上不会将文件写入磁盘；而是从内存中提供它们，从而允许热模块重载。

因此，link 和 script 标签需要指向新的服务器。如果你正在使用 encore_entry_script_tags() 和 encore_entry_link_tags() Twig 快捷方式（或者以其他方式通过 entrypoints.json 处理你的资源），你就完成了：你模板中的路径将自动指向开发服务器。

dev-server 选项

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

        1
        $ npm run dev-server -- --port 9000
    

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

        1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        // webpack.config.js
// ...

Encore
    // ...

    .configureDevServerOptions(options => {
        options.server = {
            type: 'https',
            options: {
                key: '/path/to/server.key',
                cert: '/path/to/server.crt',
            }
        }
    })
;
    

使用 Symfony Web 服务器启用 HTTPS

如果你在本地使用带有 HTTPS 的 Symfony Web 服务器，你还需要告诉 dev-server 使用 HTTPS。为此，你可以重用 Symfony Web 服务器 SSL 证书

        1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
        // webpack.config.js
  // ...
+ const path = require('path');

  Encore
      // ...

+     .configureDevServerOptions(options => {
+         options.server = {
+             type: 'https',
+             options: {
+                 pfx: path.join(process.env.HOME, '.symfony5/certs/default.p12'),
+             }
+         }
+     })
    

注意

如果你正在使用 Node.js 17 或更新版本，并且 dev-server 启动失败并出现 TLS 错误，则证书文件可能是由旧版本的 symfony-cli 生成的。请将 symfony-cli 升级到最新版本，删除旧的 ~/.symfony5/certs/default.p12 文件，然后重新启动 symfony 服务器。

这将生成一个新的 default.p12 文件，适用于最新的 Node.js 版本。

CORS 问题

如果你遇到与 CORS（跨域资源共享）相关的问题，请设置以下选项

        1
2
3
4
5
6
7
8
9
10
11
        // webpack.config.js
// ...

Encore
    // ...

    .configureDevServerOptions(options => {
        options.allowedHosts = 'all';
        // in older Webpack Dev Server versions, use this option instead:
        // options.firewall = false;
    })
    

请注意，这通常不是推荐的安全实践，但在这里是解决 CORS 问题所必需的。

热模块替换 HMR

热模块替换是 dev-server 的一项超能力，样式和（在某些情况下）JavaScript 可以自动更新，而无需重新加载你的页面。HMR 自动与 CSS 一起工作（只要你正在使用 dev-server 和 Encore 1.0 或更高版本），但仅适用于某些 JavaScript（例如 Vue.js）。

当更改 PHP / Twig 文件时实时重新加载

为了利用 HMR 超能力以及 PHP 代码和模板的实时重新加载，请设置以下选项

        1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
        // webpack.config.js
// ...

Encore
    // ...

    .configureDevServerOptions(options => {
        options.liveReload = true;
        options.static = {
            watch: false
        };
        options.watchFiles = {
            paths: ['src/**/*.php', 'templates/**/*'],
        };
    })
    

static.watch 选项是必需的，用于禁用从静态目录默认重新加载文件，因为这些文件已经由 HMR 处理。

1.0.0

在 Encore 1.0 之前，你需要在命令行传递 --hot 标志来启用 HMR。你还需要禁用 CSS 提取来为 CSS 启用 HMR。现在不再需要了。

这项工作，包括代码示例，根据 Creative Commons BY-SA 3.0 许可协议获得许可。

版本