Webpack是一种现代的模块化打包工具，它可以自动处理模块之间的依赖关系，生成最终的打包结果。Webpack可以处理各种文件类型，如JavaScript、CSS、图片等，还可以进行代码压缩、热更新等操作。

通过Webpack的配置文件，我们可以灵活地配置打包的方式和目标。Webpack的用途是将各种前端资源进行整合和打包，降低文件的复杂性，提高页面的加载速度，同时还可以实现一些高级功能，如按需加载、code splitting、tree shaking等。

// Webpack配置文件
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      }
    ]
  }
};

// 打包命令
$ npm run build