Webpack 前端源码打包指南

本文将详细介绍如何使用 Webpack 打包前端源码，并提供示例代码和步骤，帮助你快速上手。

1. 安装 Webpack

首先，你需要安装 Webpack。可以使用以下命令进行安装：

npm install webpack webpack-cli --save-dev

2. 配置 Webpack

在项目根目录下创建一个名为 'webpack.config.js' 的配置文件，并在其中配置 Webpack。以下是一个简单的配置示例：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

这个配置文件指定了入口文件和输出文件的路径，以及使用 Babel 转换 ES6 代码。

3. 安装依赖

根据 Webpack 配置文件中的规则，你需要安装 Babel 和相关的依赖：

npm install babel-loader @babel/core @babel/preset-env --save-dev

4. 执行打包命令

在项目根目录下执行以下命令来打包前端源码：

npx webpack

Webpack 会根据配置文件进行打包，并将打包后的文件输出到指定的路径。