webpack项目中dist与public文件夹的最优使用方法及目录结构管理

你设计的这套目录结构完全合理，是当前前端工业界通用的静态资源管理规范，Vue CLI、Create React App等主流脚手架都默认采用类似的分层逻辑，核心优势如下：

• 权责拆分清晰：src 目录统一管理所有需要被webpack编译处理的业务代码（JS/TS、样式文件、业务关联的静态资源等），public 目录管理不需要编译、可直接原样复用的全局静态资源（入口HTML、favicon、全站通用静态资源等），避免两类资源混放导致的维护混乱
• 构建输出统一：所有产物最终聚合到dist目录，符合前端项目部署的通用标准，不需要额外调整路径即可直接部署到静态服务器

首先安装所需依赖：

npm install webpack webpack-cli html-webpack-plugin copy-webpack-plugin css-loader style-loader --save-dev

完整的webpack.config.js配置参考如下：

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

module.exports = {
  // 业务代码入口，按实际路径调整
  entry: path.resolve(__dirname, 'src/main.js'),
  output: {
    // 所有构建产物输出到根目录dist文件夹
    path: path.resolve(__dirname, 'dist'),
    // 编译后的JS文件输出到dist/js目录，带内容哈希避免缓存
    filename: 'js/[name].[contenthash:8].js',
    // 每次构建前自动清空旧dist目录，webpack5内置能力
    clean: true,
    // 若项目部署在非根目录，可在此配置公共路径，例：publicPath: '/my-app/'
    publicPath: '/'
  },
  module: {
    rules: [
      // 处理样式文件，可按需扩展less、sass等loader
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      },
      // 处理src目录内的图片、字体等静态资源，基于webpack5内置Asset模块实现
      {
        test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf)$/i,
        type: 'asset',
        parser: {
          // 小于8KB的资源自动转base64内嵌到代码中，可自行调整阈值
          dataUrlCondition: {
            maxSize: 8 * 1024
          }
        },
        generator: {
          // 大于阈值的资源输出到dist/assets目录，带哈希避免缓存
          filename: 'assets/[name].[hash:8][ext]'
        }
      }
    ]
  },
  plugins: [
    // 处理入口HTML文件，自动注入编译后的JS、CSS资源
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/index.html'),
      filename: 'index.html',
      minify: {
        // 生产环境可开启HTML压缩
        removeComments: true,
        collapseWhitespace: true
      }
    }),
    // 拷贝public目录下除index.html外的所有资源到dist目录
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'public'),
          to: path.resolve(__dirname, 'dist'),
          globOptions: {
            // 排除index.html，避免重复处理
            ignore: ['**/index.html']
          }
        }
      ]
    })
  ]
}

• 业务代码中引用public/assets下的资源时，直接使用绝对路径/assets/xxx.png即可，构建后会自动匹配到dist下的对应路径
• 如果需要区分开发、生产环境的配置，可拆分多份配置文件，通过webpack-merge合并公共配置

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