Webpack 入门教程：第 1 部分

在现代前端开发中，Webpack 是一个至关重要的工具，它能帮助开发者高效地处理各种资源，优化项目性能。本文作为系列教程的第 1 部分，将带领你快速走进 Webpack 的世界。

Webpack 本质上是一个模块打包工具。在传统的前端开发中，随着项目规模的增大，脚本和样式等资源的管理会变得复杂。Webpack 可以将多个模块打包成一个或多个文件，减少浏览器的请求次数，提升页面加载速度。

确保你已经安装了 Node.js 和 npm（Node Package Manager）。因为 Webpack 是基于 Node.js 运行的，npm 则用于管理项目的依赖。

创建一个新项目目录，在终端进入该目录后，执行 npm init -y 命令，这会初始化一个 package.json 文件，用于记录项目的元数据和依赖信息。

接下来，安装 Webpack 和 Webpack CLI。在终端运行 npm install webpack webpack-cli --save-dev。--save-dev 选项表示将这些依赖安装为开发依赖，因为它们只在开发过程中使用。

安装完成后，在项目根目录下创建一个 webpack.config.js 文件，这是 Webpack 的配置文件。在这个文件里，你可以告诉 Webpack 如何处理不同类型的文件。

例如，基本的配置如下：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

这里，entry 字段指定了 Webpack 打包的入口文件，output 字段定义了输出文件的路径和文件名。

Webpack 本身只能处理 JavaScript 文件，对于其他类型的文件，如 CSS、图片等，需要使用相应的 loader。例如，要处理 CSS 文件，需要安装 css-loader 和 style-loader，并在 webpack.config.js 中配置：

module.exports = {
  // 其他配置...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
        'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

上述配置中，test 字段用于匹配文件类型，use 字段指定了处理该类型文件的 loader。

通过以上步骤，你已经完成了 Webpack 的基本入门配置。后续的教程中，我们将深入探讨更多关于 Webpack 的功能，如代码分割、优化构建等内容。