Webpack 是一个前端构建工具，它可以通过打包成.js、.css、.ts、.html等文件来实现项目的构建。以下是一个简单的 webpack 配置案例：

```javascript const path = require('path');

module.exports = { // 输出文件 output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js', publicPath: '/dist/' }, // 服务器端处理 entry: './src/index.js', // 依赖 devServer: { contentBase: './dist', hot: true, port: 3000, host: 'localhost', inline: true }, // 配置打包规则 module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, { test: /.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, // 配置打包任务 resolve: { extensions: ['.js', '.ts', '.html'] }, // 配置编译器 plugins: [ new webpack.optimize.UglifyJsPlugin({ minimize: true, compress: { code: true, deadCode: true } }) ] }; ```

以上配置中，我们定义了一个输出文件路径（dist），以及服务器端的处理规则（devServer）。我们还定义了一个打包规则，该规则用于处理 .js 和 .css 文件。我们还配置了模块规则，用于处理 .js 文件，以及使用了浏览器插件（style-loader 和 css-loader）来处理 .css 文件。最后，我们配置了编译器规则，用于压缩 .js 文件。

你可以根据你的项目需求来调整这个配置，例如，你可以增加服务器端的处理规则，或者添加其他打包规则。

Webpack 是一个前端构建工具，它可以通过打包成.js、.css、.ts、.html等文件来实现项目的构建。以下是一个简单的 webpack 配置案例：

```javascript const path = require('path');

module.exports = { // 输出文件 output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js', publicPath: '/dist/' }, // 服务器端处理 entry: './src/index.js', // 依赖 devServer: { contentBase: './dist', hot: true, port: 3000, host: 'localhost', inline: true }, // 配置打包规则 module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, { test: /.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, // 配置打包任务 resolve: { extensions: ['.js', '.ts', '.html'] }, // 配置编译器 plugins: [ new webpack.optimize.UglifyJsPlugin({ minimize: true, compress: { code: true, deadCode: true } }) ] }; ```

以上配置中，我们定义了一个输出文件路径（dist），以及服务器端的处理规则（devServer）。我们还定义了一个打包规则，该规则用于处理 .js 和 .css 文件。我们还配置了模块规则，用于处理 .js 文件，以及使用了浏览器插件（style-loader 和 css-loader）来处理 .css 文件。最后，我们配置了编译器规则，用于压缩 .js 文件。

你可以根据你的项目需求来调整这个配置，例如，你可以增加服务器端的处理规则，或者添加其他打包规则。