webpack打包的dist文件内复制文件

一、src内的文件向dist文件复制文件

• 首先，安装copy-webpack-plugin插件：

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

• 接下来，在Vue项目的根目录下，创建或编辑vue.config.js文件，并添加以下配置：

// vue.config.js
const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  configureWebpack: {
     resolve: {
      	alias: {
          '@': path.resolve(__dirname, 'src'),
        }
     },
    plugins: [
      new CopyPlugin({
        patterns: [
           {
            from: 'src/App.vue',
            to: 'dist',
          },
        ],
      }),
    ],
  },
};

• 成功！打包后生成的效果
  

二、dist目录下有去除js，img，css等文件夹 把里面的内容直接和index.html文件夹平级

• 最近碰到有这个需求，如果使用copy-webpack-plugin插件上面这种方式会出现下面报错，打包的过程中没找到需要被复制的文件夹中的文件。

 plugins: [
      new CopyWebpackPlugin({
        patterns: [
           {
             from: path.resolve(__dirname, 'dist', 'js'),
             to: path.resolve(__dirname, 'dist')
           },
           {
             from: path.resolve(__dirname, 'dist', 'img'),
             to: path.resolve(__dirname, 'dist')
           },
        ]
      }),
      ]

使用fs-extra

在 webpack打包完成后，再去复制 dist 目录下的文件，可以使用 Node.js的 fs 模块来实现这一目的。在构建完成后的钩子中编写代码来复制文件，例如 afterEmit 钩子或者在构建完成后的回调函数中进行操作。

• 首先，安装 fs-extra 依赖：

npm install fs-extra --save-dev

• 然后，在你的 webpack配置文件中，可以应用这个方法：

const fs = require('fs-extra');
const path = require('path');
module.exports = {
  plugins: [
	{
        apply: (compiler) => {
          compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
            const sourcePaths = [
              path.resolve(__dirname, 'dist', 'js'),
              path.resolve(__dirname, 'dist', 'css'),
              // path.resolve(__dirname, 'dist', 'img'),
              path.resolve(__dirname, 'dist', 'fonts')
            ];

            const targetPath = path.resolve(__dirname, 'dist');
            sourcePaths.forEach((sourcePath) => {
              try {
                fs.copySync(sourcePath, targetPath);
                console.log(`${sourcePath} copied successfully!`);

                 // 删除源文件夹
                fs.removeSync(sourcePath);
                console.log(`Source folder ${sourcePath} removed successfully!`);
              } catch (err) {
                console.error(`Error copying ${sourcePath}:`, err);
              }
            });


          });
        }
      }
  ]
};

以上需要确保将路径和目录名称调整为你实际的目录结构。这个方法将在 webpack构建完成后执行文件复制操作。

• 成功！
  

可能会出现的错误

• 1、提示入口点大小限制:以下入口点组合资产大小超过建议限制(244kib)。这可能会影响web性能？
• 可以设置限制入口点文件大小来去除警告
  

	configureWebpack: {
	     performance: {
	       hints: false,
	       maxEntrypointSize: 512000, // 限制入口点文件大小
	       maxAssetSize: 512000, // 限制单个文件大小
	     },
     }

• 2 、如果提示找不到某个文件，但是这个文件又能在dist目录下找到？
• 可能是因为没有完全复制完 就删除了源文件导致的错误
  
• 复制完成之后再去删除源文件，可修改成一下代码

plugins: [
      {
        apply: (compiler) => {
          compiler.hooks.afterEmit.tap('AfterEmitPlugin', async (compilation) => {
            const sourcePaths = [
              path.resolve(__dirname, 'dist', 'js'),
              path.resolve(__dirname, 'dist', 'css'),
              // path.resolve(__dirname, 'dist', 'img'),
              path.resolve(__dirname, 'dist', 'fonts')
            ];
            const targetPath = path.resolve(__dirname, 'dist');
            for (const sourcePath of sourcePaths) {
              try {
                await fs.copy(sourcePath, targetPath);
                console.log(`${sourcePath} copied successfully!`);
        
                await fs.remove(sourcePath);
                console.log(`Source folder ${sourcePath} removed successfully!`);
              } catch (err) {
                console.error(`Error copying ${sourcePath}:`, err);
              }
            }
          });
        }
      }
    ],

完整代码如下：

const { defineConfig } = require('@vue/cli-service')
const path = require('path');
const fs = require('fs-extra');

module.exports = defineConfig({
  transpileDependencies: true,
  outputDir: "dist",
  configureWebpack: {
    performance: {
      hints: false,
      maxEntrypointSize: 512000, // 限制入口点文件大小
      maxAssetSize: 512000, // 限制单个文件大小
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
    plugins: [
      {
        apply: (compiler) => {
          compiler.hooks.afterEmit.tap('AfterEmitPlugin', async (compilation) => {
            const sourcePaths = [
              path.resolve(__dirname, 'dist', 'js'),
              path.resolve(__dirname, 'dist', 'css'),
              // path.resolve(__dirname, 'dist', 'img'),
              path.resolve(__dirname, 'dist', 'fonts')
            ];
            const targetPath = path.resolve(__dirname, 'dist');
            for (const sourcePath of sourcePaths) {
              try {
                await fs.copy(sourcePath, targetPath);
                console.log(`${sourcePath} copied successfully!`);
        
                await fs.remove(sourcePath);
                console.log(`Source folder ${sourcePath} removed successfully!`);
              } catch (err) {
                console.error(`Error copying ${sourcePath}:`, err);
              }
            }
          });
        }
      }
    ],
  },
})