如何配置Webpack在Watch模式下将打包产物输出至指定文件夹并同步到网络路径

你提到官方不建议用CopyWebpackPlugin复制构建产物是完全正确的——这个插件的设计初衷是把静态资源复制到构建目录，而非将构建完成的产物同步到外部路径。针对你的需求，推荐使用webpack-shell-plugin-next或者filemanager-webpack-plugin，它们能在构建完成后执行自定义操作，并且可以轻松配置为仅在watch模式下触发。

下面是具体实现步骤，以webpack-shell-plugin-next为例：

1. 安装插件 #

首先安装依赖：

npm install webpack-shell-plugin-next --save-dev

2. 修改Webpack配置 #

更新你的TypeScript配置文件，引入插件并添加到plugins数组中，同时配置仅在watch模式下执行复制命令：

import * as path from 'path';
import * as webpack from 'webpack';
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
import WebpackShellPluginNext from 'webpack-shell-plugin-next';

const config: webpack.Configuration = {
    entry: {
        'mywidget': './src/mywidget.ts'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.tmpl\.html$/i,
                type: 'asset/source',
                exclude: /node_modules/,
            }
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new WebpackShellPluginNext({
            // 仅在watch模式下执行命令
            onBuildEnd: {
                scripts: [
                    // Windows系统下的网络路径复制示例（根据实际路径修改）
                    'xcopy /E /Y "dist\\*" "\\\\host-platform\\widgets\\mywidget"',
                    // 如果是Linux/macOS，替换为：
                    // 'cp -r dist/* /mnt/host-platform/widgets/mywidget'
                ],
                blocking: false,
                parallel: true
            },
            // 明确仅watch模式触发
            dev: false,
            watch: true
        })
    ],
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    devtool: 'source-map',
    mode: "development",
    externals: { jquery: 'jQuery' }
};

export default config;

关键配置说明 #

• watch: true：告诉插件仅在Webpack处于watch模式时执行指定命令。
• onBuildEnd：钩子时机，在每次构建完成后自动执行复制操作。
• 复制命令：根据你的操作系统和网络路径调整。Windows下xcopy的/E参数会复制子目录，/Y参数会自动覆盖文件无需确认；Linux/macOS则用cp -r递归复制。注意确保当前用户有访问目标网络路径的权限。

备选方案：filemanager-webpack-plugin #

如果你更倾向于用插件API而非shell命令，filemanager-webpack-plugin也是不错的选择，它原生支持复制/移动/删除文件操作，同样可以配置触发条件：

1. 安装：

npm install filemanager-webpack-plugin --save-dev

2. 配置示例：

import { FileManagerPlugin } from 'filemanager-webpack-plugin';

// 在plugins数组中添加：
new FileManagerPlugin({
    events: {
        // 仅在watch模式下的构建完成后执行
        onEnd: {
            copy: [
                {
                    source: './dist/**/*',
                    destination: '\\\\host-platform\\widgets\\mywidget'
                }
            ]
        }
    },
    runTasksInSeries: true,
    watch: true
})

这样配置后，当你执行webpack --watch命令时，每次构建完成都会自动把dist文件夹的内容同步到指定的网络路径，完美满足你在真实宿主环境下测试调试的需求。

内容的提问来源于stack exchange，提问作者Steve B