Webpack打包配置：如何将指定目录文件复制到新建product文件夹？

Got it, let's get this sorted out for you. To make your build command generate a product folder with the copied config (including setting.js) and virtual folders from public, you'll need to use the copy-webpack-plugin along with adjusting your output path in Webpack. Here's a step-by-step breakdown:

Step 1: Install the Required Plugin #

First, install copy-webpack-plugin (it handles copying static files/folders during the build process):

npm install copy-webpack-plugin --save-dev
# Or if you use yarn:
yarn add copy-webpack-plugin --dev

Step 2: Update Your webpack.prod.js #

Here's how to modify your existing config to meet your needs. I'll integrate your existing code and add the necessary configurations:

const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
// Import your base config if you have one (common practice for Webpack setups)
const baseConfig = require('./webpack.base.js');

const prodConfig = merge(baseConfig, {
  // Set the output directory to the "product" folder
  output: {
    path: path.resolve(__dirname, 'product'),
    // Keep your existing output filename settings here, e.g.:
    filename: '[name].[contenthash].js'
  },
  plugins: [
    // Your existing UglifyJSPlugin
    new UglifyJSPlugin({
      // Add your uglify options here if needed
    }),
    // Add the CopyWebpackPlugin to copy the required folders
    new CopyWebpackPlugin({
      patterns: [
        // Copy public/config folder to product/config
        {
          from: path.resolve(__dirname, 'public/config'),
          to: path.resolve(__dirname, 'product/config')
        },
        // Copy public/virtual folder to product/virtual
        {
          from: path.resolve(__dirname, 'public/virtual'),
          to: path.resolve(__dirname, 'product/virtual')
        }
      ]
    })
  ]
});

module.exports = prodConfig;

Key Explanations: #

• output.path: This tells Webpack to dump all bundled assets (JS, CSS, etc.) into the product folder instead of the default dist.
• CopyWebpackPlugin: The patterns array defines which files/folders to copy. Each object's from is the source path (your public subfolders), and to is the destination path inside the product folder.

Step 3: Test the Build #

Run your build command as usual:

npm run build

After the build completes, you'll find:

• The product folder in your project root
• All your bundled assets inside product
• The product/config folder with setting.js copied over
• The product/virtual folder with all its contents from public/virtual

内容的提问来源于stack exchange，提问作者Abbott Liu