# 1. Webpack

## 1.1 基础概念
### 1.1.1 入口（Entry）
入口起点指示 Webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。示例配置如下：
```javascript
// webpack.config.js
module.exports = {
  entry: './src/index.js'
};
```

### 1.1.2 输出（Output）
输出配置告诉 Webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。示例配置如下：
```javascript
const path = require('path');

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

## 1.2 加载器（Loaders）
### 1.2.1 Babel Loader
用于将 ES6+ 代码转换为浏览器可兼容的 JavaScript 代码。安装和配置示例如下：
```bash
npm install --save-dev babel-loader @babel/core @babel/preset-env
```
```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/, 
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};
```

### 1.2.2 CSS Loader 和 Style Loader
用于处理 CSS 文件。安装和配置示例如下：
```bash
npm install --save-dev css-loader style-loader
```
```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, 
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};
```

## 1.3 插件（Plugins）
### 1.3.1 HtmlWebpackPlugin
用于生成 HTML 文件，并自动注入打包后的 JavaScript 文件。安装和配置示例如下：
```bash
npm install --save-dev html-webpack-plugin
```
```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};
```

### 1.3.2 CleanWebpackPlugin
用于在每次构建前清理 `dist` 目录。安装和配置示例如下：
```bash
npm install --save-dev clean-webpack-plugin
```
```javascript
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    new CleanWebpackPlugin()
  ]
};
```

## 1.4 开发服务器（Dev Server）
Webpack Dev Server 提供了一个简单的 Web 服务器，并且能够实时重新加载（Live Reloading）。安装和配置示例如下：
```bash
npm install --save-dev webpack-dev-server
```
```javascript
module.exports = {
  devServer: {
    contentBase: './dist',
    open: true
  }
};
```
运行开发服务器的命令：
```bash
npx webpack-dev-server --open
```