webpack实际应用代码

webpack是一个非常流行的JavaScript模块打包器，可以用于将多个JavaScript文件打包成一个或多个文件以便于在浏览器中运行。以下是一个webpack实际应用代码的示例：

// webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
};

这是一个webpack配置文件，它定义了项目的入口点、输出目录、模块规则等。在这个示例中，我们使用Babel加载器将所有JavaScript文件转换为ES5语法，使用style-loader和css-loader加载CSS文件，并使用file-loader加载图片文件。最后，webpack会将所有模块打包成一个名为main.js的文件，放置在dist目录下。