ReactJS中如何按原目录结构将SCSS及图片文件复制到dist包

数据老陈

2026-6-13

解决SCSS与图片文件同步到dist并保留目录结构的方案

方案1：使用`copyfiles`工具（简单直接）

这是专门用于复制文件并保留目录结构的工具，无需复杂配置：

安装依赖：

npm install copyfiles --save-dev

在package.json的scripts中添加组合编译命令：

"scripts": {
  "build": "npx babel src/lib --out-dir dist && npx copyfiles -u 2 src/lib/**/*.{scss,png,jpg,jpeg,gif,svg} dist"
}

-u 2表示忽略路径的前2级（比如src/lib/components/style.scss会被复制到dist/components/style.scss，而非dist/src/lib/...）
**/*.{scss,png,...}匹配所有子目录下的目标文件类型

方案2：修复webpack配置（用`copy-webpack-plugin`）

如果坚持使用webpack，通过该插件可精准控制文件复制路径：

安装插件：

npm install copy-webpack-plugin --save-dev

修改webpack.config.js添加插件配置：

const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  // 其他webpack配置项...
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'src/lib/**/*.{scss,png,jpg,jpeg,gif,svg}',
          to({ context, absoluteFilename }) {
            // 保留文件相对于src/lib的原有目录结构
            const relativePath = path.relative('src/lib', absoluteFilename);
            return path.join('dist', relativePath);
          }
        }
      ]
    })
  ]
};

配置完成后，运行webpack即可按原有目录结构复制目标文件到dist中。

方案3：使用`rsync`（Linux/macOS环境适用）

类Unix系统可直接用系统自带命令，无需额外安装依赖：

npx babel src/lib --out-dir dist && rsync -av --include='*.scss' --include='*.png' --include='*.jpg' --include='*.jpeg' --include='*.gif' --include='*.svg' --include='*/' --exclude='*' src/lib/ dist/