Webpack 101：配置指南（基础）

2023-10-23 02:05:31

1. 初识 Webpack

Webpack 是一款前端构建工具，可用于打包应用程序的代码、样式和资产。它能够将多种资源（如 JavaScript、CSS、图像等）组合在一起，生成一个或多个优化过的文件。Webpack 的主要优点包括：

模块化开发：Webpack 允许您将应用程序分解为更小的模块，从而便于管理和重用代码。
代码压缩和优化：Webpack 可以对 JavaScript 代码进行压缩和优化，以减少文件大小并提高性能。
资源管理：Webpack 可以帮助您管理应用程序中的各种资源，如 CSS、图像和字体等。

2. Webpack 的基本配置

Webpack 的配置通常存储在一个名为 webpack.config.js 的文件中。该文件包含了构建应用程序所需的各种设置和选项。以下是 webpack.config.js 的一个基本示例：

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};