Webpack 是一个强大的打包工具，可以帮助我们将多个模块打包成一个或多个 JavaScript 文件。下面是一个基本的 Webpack 配置示例，可以用于构建一个简单的 JavaScript 项目：
安装 Webpack 和相关依赖
在项目的根目录下打开命令行窗口，执行以下命令来安装 Webpack 和相关依赖：
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
其中，webpack 是 Webpack 的核心依赖，webpack-cli 是 Webpack 的命令行工具，webpack-dev-server 是 Webpack 的开发服务器，html-webpack-plugin 是 Webpack 的 HTML 模板插件。
创建 Webpack 配置文件
在项目的根目录下创建一个名为 webpack.config.js 的文件，然后添加以下代码：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js', // 入口文件
output: { // 输出文件
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: { // 模块配置
rules: [
{
test: /\.js$/, // 匹配 JavaScript 文件
exclude: /node_modules/, // 排除 node_modules 目录
use: {
loader: 'babel-loader' // 使用 babel-loader 处理 JavaScript 文件
}
}
]
},
plugins: [ // 插件配置
new HtmlWebpackPlugin({
template: './src/index.html' // 使用 index.html 作为 HTML 模板
})
],
devServer: { // 开发服务器配置
contentBase: './dist' // 设置服务器的根目录为 dist 目录
}
};上面的代码中，entry 指定了入口文件，output 指定了输出文件，module.rules 定义了如何处理 JavaScript 文件，plugins 配置了 Webpack 的插件，devServer 配置了 Webpack 的开发服务器。
创建 Babel 配置文件
在项目的根目录下创建一个名为 .babelrc 的文件，然后添加以下代码：
{
"presets": ["@babel/preset-env"]
}上面的代码指定了使用 @babel/preset-env 来处理 JavaScript 文件。
创建 JavaScript 文件和 HTML 文件
在 src 目录下创建一个名为 index.js 的文件，然后添加以下代码：
const sum = (a, b) => {
return a + b;
};
console.log(sum(1, 2));在 src 目录下创建一个名为 index.html 的文件，然后添加以下代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webpack Demo</title> </head> <body> <script src="bundle.js"></script> </body> </html>
执行打包命令
在命令行中执行以下命令来启动 Webpack 开发服务器：
npx webpack serve --mode development
执行完成后，可以在浏览器中打开 http://localhost:8080 来查看项目效果。
以上是一个基本的 Webpack 配置示例，你可以根据项目需要进行相应的修改和扩展。