如何让Webpack打包src新增文件夹/文件至dist目录？

1. 检查入口（entry）配置 #

如果你的webpack配置里entry是固定写死的单个/少数文件（比如entry: './src/index.js'），新增的文件不会被自动加入打包队列。需要改成动态匹配src下的目标文件：

• 先安装glob用于文件匹配：

  npm install glob --save-dev
  

• 修改webpack.config.js的entry配置：

  const glob = require('glob');
  const path = require('path');
  
  module.exports = {
    // 匹配src目录下所有.js文件（可根据实际需求改成.ts/.jsx等）
    entry: glob.sync('./src/**/*.js'),
    output: {
      filename: '[name].js', // 按文件相对路径生成打包后的文件名
      path: path.resolve(__dirname, 'dist'),
      clean: true // 可选：每次打包清空dist目录，避免残留旧文件
    },
    // 多页面应用可改用键值对形式的entry，保持目录结构
    // entry: Object.fromEntries(
    //   glob.sync('./src/**/*.js').map(file => [
    //     file.replace(/^src\/(.*)\.js$/, '$1'), // 提取相对路径作为chunk名
    //     `./${file}`
    //   ])
    // ),
  }
  

2. 处理静态资源文件 #

如果新增的是图片、字体、json这类静态资源，需要用copy-webpack-plugin复制到dist：

• 安装插件：

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

• 在webpack.config.js中添加插件配置：

  const CopyPlugin = require('copy-webpack-plugin');
  
  module.exports = {
    // 其他配置...
    plugins: [
      new CopyPlugin({
        patterns: [
          // 示例：把src/assets下的所有文件复制到dist/assets
          { from: 'src/assets', to: 'assets' },
          // 或者匹配src下所有非js/ts的文件：
          // { 
          //   from: 'src', 
          //   to: '', 
          //   filter: resourcePath => !resourcePath.endsWith('.js') && !resourcePath.endsWith('.ts') 
          // }
        ],
      }),
    ],
  };
  

3. 确保新增文件类型有对应Loader处理 #

如果新增的是CSS、TS、图片这类特殊文件，需要配置对应的loader让Webpack识别并处理：

比如处理图片资源的配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource', // 自动将图片输出到dist目录，并在代码中生成对应访问路径
      },
      // 处理CSS文件的示例：
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

4. 新增HTML页面的处理 #

如果新增的是HTML页面文件，需要用html-webpack-plugin自动生成对应HTML并关联打包后的JS：

• 安装插件：

  npm install html-webpack-plugin --save-dev
  

• 配置插件：

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const glob = require('glob');
  
  module.exports = {
    // 其他配置...
    plugins: [
      // 动态生成所有src下的HTML文件，保持原目录结构输出到dist
      ...glob.sync('./src/**/*.html').map(file => new HtmlWebpackPlugin({
        template: file,
        filename: file.replace('src/', ''),
        chunks: [file.replace(/^src\/(.*)\.html$/, '$1')] // 可选：关联对应JS chunk
      }))
    ]
  };
  

内容的提问来源于stack exchange，提问作者mr samiasolias