前端源码打包：使用 npm 和 webpack 生成 dist 文件夹

首先，需要在项目的根目录下创建一个名为 'package.json' 的文件，用于描述项目的信息和依赖项。

然后，在命令行中进入项目根目录，执行以下命令安装打包工具 'webpack' 和相关插件：

npm install webpack webpack-cli --save-dev

接着，在项目根目录下创建一个名为 'webpack.config.js' 的文件，用于配置webpack的打包规则。以下是一个简单的示例配置：

const path = require('path');

module.exports = {
  mode: 'production',  // 打包模式为生产模式
  entry: './src/index.js',  // 入口文件路径
  output: {
    filename: 'bundle.js',  // 打包后的文件名
    path: path.resolve(__dirname, 'dist')  // 打包后的文件存放路径
  }
};

其中，'mode' 配置项指定了打包模式，包括 'development' 和 'production' 两种模式，分别对应开发环境和生产环境。'entry' 配置项指定了入口文件的路径，'output' 配置项指定了打包后的文件名和存放路径。

最后，在命令行中执行以下命令进行打包：

npx webpack

打包完成后，会在项目根目录下生成一个名为 'dist' 的文件夹，其中包含了打包后的文件。