如何在Symfony Webpack Encore构建时自动调用自定义脚本？

嘿，这两个问题其实都可以通过Webpack Encore的底层配置和Node环境的支持来解决，我给你一步步拆解：

Webpack Encore本质是Webpack的上层封装，所以我们可以利用Webpack的钩子机制，或者简单的npm脚本串联来实现：

方式1：利用Webpack的构建钩子（推荐，灵活控制时机） #

在你的webpack.config.js里，通过Encore.configureWebpack()方法添加Webpack的钩子，比如要在构建完成后执行脚本，可以用done钩子：

// webpack.config.js
const Encore = require('@symfony/webpack-encore');
const path = require('path');

// ... 你的基础Encore配置（比如设置输出目录、启用Vue等） ...

// 配置自定义构建钩子
Encore.configureWebpack(config => {
    config.plugins.push({
        apply: (compiler) => {
            // 构建完成后触发这个钩子
            compiler.hooks.done.tap('CustomPostBuildScript', (stats) => {
                console.log('✅ 构建完成！开始执行自定义脚本...');
                // 直接写逻辑，或者引入外部脚本文件
                require(path.resolve(__dirname, './scripts/post-build.js'));
            });
        }
    });
});

module.exports = Encore.getWebpackConfig();

然后在项目根目录建个scripts/post-build.js，写你的自定义逻辑就行：

// scripts/post-build.js
const fs = require('fs');

console.log('🔧 自定义脚本正在运行');
// 举个例子：生成一个构建时间文件
fs.writeFileSync('./build-timestamp.txt', `构建时间：${new Date().toLocaleString()}`);

如果需要在构建开始前执行脚本，就把done换成beforeRun或者compile钩子，根据你的需求选合适的时机就行。

方式2：用npm脚本串联（简单直接，适合构建后执行） #

如果你的需求只是在构建命令跑完后执行脚本，直接改package.json里的脚本最省事：

{
  "scripts": {
    "build": "encore production && node ./scripts/post-build.js",
    "dev": "encore dev && node ./scripts/post-build.js"
  }
}

这样每次运行npm run build或npm run dev，构建结束后都会自动执行你的脚本。

先澄清一下：fs是Node.js的核心模块，TypeScript只是给它提供了类型定义，所以只能在Node环境下用（比如构建时的自定义脚本，不能在浏览器端的Vue组件里用——浏览器没有fs这个API）。

按下面步骤来配置：

1. 先安装Node.js的类型定义包：

npm install @types/node --save-dev

2. 修改你的tsconfig.json，确保包含Node的类型：

{
  "compilerOptions": {
    // ... 其他配置（比如target、module等） ...
    "types": ["node"]
  }
}

3. 现在就能在TypeScript脚本里愉快用fs了：

// scripts/post-build.ts
import * as fs from 'fs';
import * as path from 'path';

console.log('🔧 TypeScript自定义脚本运行中');
const buildDir = path.resolve(__dirname, '../public/build');
const buildFiles = fs.readdirSync(buildDir);
console.log('构建产物列表：', buildFiles);

如果你的Webpack配置文件是用TypeScript写的（webpack.config.ts），同样可以这样导入并使用fs模块。

⚠️ 注意：如果想在Vue组件里操作文件，别想着用fs——浏览器环境不支持这种操作，得通过后端接口来实现文件读写。

内容的提问来源于stack exchange，提问作者Lajdák Marek