如何使用Webpack打包public目录下的全部文件？

当然可以实现！你当前的配置只指定了单个入口文件，所以只打包了controllers.js。下面给你几种灵活的方案，帮你自动打包public目录下的所有相关文件：

方案1：动态生成多入口（推荐，灵活可控） #

通过Webpack内置的require.context方法，我们可以自动遍历public目录下的所有目标文件，并生成对应的入口配置。这样新增文件时不需要手动修改配置：

const path = require('path');

// 自动获取public目录下的所有js和css文件作为入口
function getEntries() {
  const entries = {};
  // 参数说明：遍历目录、是否递归子目录、匹配文件的正则
  const fileContext = require.context('./public', true, /\.(js|css)$/);
  
  fileContext.keys().forEach(filePath => {
    // 生成唯一的chunk名称，比如将`./js/utils.js`转为`js/utils`
    const chunkName = filePath.replace(/^\.\//, '').replace(/\.(js|css)$/, '');
    entries[chunkName] = fileContext(filePath);
  });

  // 如果你希望把所有文件合并成一个bundle，也可以改成这样：
  // entries.bundle = fileContext.keys().map(key => fileContext(key));
  
  return entries;
}

module.exports = {
  mode: 'development',
  entry: getEntries(),
  output: {
    path: path.join(__dirname, 'public'),
    // 使用[name]占位符，根据chunk名称生成对应的输出文件
    filename: '[name].bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: { loader: 'babel-loader' },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  devServer: {
    port: 3000,
    open: true,
    proxy: { '/': 'http://localhost:8080' },
  },
};

方案2：合并成单个bundle（简单直接） #

如果你只想把所有文件打包成一个bundle.js，可以借助glob工具包来匹配所有目标文件（需要先安装依赖）：

1. 首先安装glob：

npm install glob --save-dev

2. 修改Webpack配置：

const path = require('path');
const glob = require('glob');

module.exports = {
  mode: 'development',
  // 匹配public下所有js和css文件，合并为一个入口
  entry: glob.sync('./public/**/*.js').concat(glob.sync('./public/**/*.css')),
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: { loader: 'babel-loader' },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  devServer: {
    port: 3000,
    open: true,
    proxy: { '/': 'http://localhost:8080' },
  },
};

额外注意事项（针对AngularJS项目） #

• 依赖注入问题：Webpack压缩代码时会混淆变量名，可能导致AngularJS无法识别依赖。解决方法：要么使用数组式依赖注入（比如angular.module('app').controller('Ctrl', ['$scope', function($scope) {}])），要么安装ng-annotate-loader自动处理依赖注入。
• 其他资源处理：如果你的项目有图片、字体等资源，需要添加对应的loader（比如Webpack5+可以用asset modules，或者使用file-loader）。
• devServer代理：确保你的后端服务运行在http://localhost:8080，否则代理会失效。

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