Webpack打包工具入门与配置

# 1. **介绍Webpack**
- 1.1 什么是Webpack
- 1.2 Webpack的作用和优势

# 2. **安装与基本配置**

- 2.1 安装Node.js和npm
- 2.2 初始化一个Webpack项目
- 2.3 Webpack配置文件详解

# 3. 打包一个简单的项目**

在这一章节中，我们将通过一个简单的示例项目来帮助你初步了解如何使用Webpack打包工具。我们将会创建项目结构、编写JavaScript代码、配置Webpack打包以及运行打包命令。

#### 3.1 创建项目结构

首先，在你的项目文件夹中创建以下文件夹结构：

- project
  | - src
    | - index.js
  | - dist
  | - package.json
  | - webpack.config.js

在 `src` 文件夹中创建一个名为 `index.js` 的JavaScript文件，作为我们的入口文件。

#### 3.2 编写JavaScript代码

在 `index.js` 文件中编写以下简单的JavaScript代码：

// index.js
const greet = (name) => {
  return `Hello, ${name}!`;
}

console.log(greet('Webpack'));

这段代码定义了一个简单的函数 `greet`，并在控制台输出了 `Hello, Webpack!`。

#### 3.3 配置Webpack打包

接下来，在项目根目录下创建 `webpack.config.js` 文件，并进行基本的Webpack配置：

// webpack.config.js
const path = require('path');

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

上面的配置指定了入口文件为 `src/index.js`，输出文件为 `dist/bundle.js`。

#### 3.4 运行打包命令

现在，打开命令行工具，进入项目根目录，运行以下命令：

npx webpack

Webpack 将会根据配置文件进行打包，生成 `bundle.js` 文件到 `dist` 文件夹中。你可以在浏览器控制台中看到输出 `Hello, Webpack!`。

这样，你已经成功完成了一个简单的项目打包过程。

# 4. **加载器与插件**

加载器和插件是Webpack中非常重要的概念，它们能够帮助开发者处理各种不同类型的资源文件，并实现更多复杂的功能。

#### 4.1 加载器的作用和使用

加载器主要用于处理非JavaScript文件，将它们转换为模块，供应用程序使用。加载器通常在项目的`module.rules`里进行配置。

module: {
    rules: [
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']