Webpack 基础¶

在现代 JavaScript 开发中，模块化是一个非常重要的概念。Webpack 是一个强大的模块打包工具，它能够将多个 JavaScript 文件、样式表、图片等资源打包成一个或多个文件，以便在浏览器中高效加载。本文将介绍 Webpack 的基本配置和使用，帮助你掌握这一工具。

1. 什么是 Webpack？¶

Webpack 是一个静态模块打包器（module bundler），它能够将项目中的所有资源（如 JavaScript、CSS、图片等）视为模块，并通过依赖关系将它们打包成一个或多个文件。Webpack 的核心概念包括：

入口（Entry）：指定 Webpack 开始构建依赖图的起点。
输出（Output）：指定打包后的文件输出位置和文件名。
加载器（Loaders）：用于处理非 JavaScript 文件（如 CSS、图片等），将它们转换为有效的模块。
插件（Plugins）：用于执行更广泛的任务，如优化、压缩、环境变量注入等。

2. 安装 Webpack¶

在开始使用 Webpack 之前，你需要先安装它。你可以通过 npm 或 yarn 来安装 Webpack。

# 使用 npm 安装 Webpack 和 Webpack CLI
npm install --save-dev webpack webpack-cli

# 使用 yarn 安装 Webpack 和 Webpack CLI
yarn add --dev webpack webpack-cli

3. 基本配置¶

Webpack 的配置文件通常命名为 webpack.config.js，并放置在项目的根目录下。下面是一个最基本的 Webpack 配置示例：

// webpack.config.js

const path = require('path');

module.exports = {
  // 入口文件
  entry: './src/index.js',

  // 输出配置
  output: {
    filename: 'bundle.js', // 输出文件名
    path: path.resolve(__dirname, 'dist'), // 输出路径
  },

  // 模式：development 或 production
  mode: 'development',
};

3.1 入口（Entry）¶

entry 属性指定了 Webpack 开始构建依赖图的起点。在上面的配置中，entry 指向 ./src/index.js，这意味着 Webpack 将从 index.js 文件开始分析依赖关系。

3.2 输出（Output）¶

output 属性指定了打包后的文件输出位置和文件名。filename 是输出文件的名称，path 是输出文件的路径。在上面的配置中，打包后的文件将输出到 dist/bundle.js。

3.3 模式（Mode）¶

mode 属性指定了 Webpack 的构建模式。development 模式会启用开发工具（如 source maps），而 production 模式会启用优化（如代码压缩）。

4. 使用加载器（Loaders）¶

Webpack 默认只能处理 JavaScript 文件。为了处理其他类型的文件（如 CSS、图片等），我们需要使用加载器（Loaders）。下面是一个使用 style-loader 和 css-loader 来处理 CSS 文件的示例：

// webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/, // 匹配所有 .css 文件
        use: ['style-loader', 'css-loader'], // 使用 style-loader 和 css-loader
      },
    ],
  },
};

4.1 `style-loader` 和 `css-loader`¶

css-loader：解析 CSS 文件，并将其转换为 JavaScript 模块。
style-loader：将 CSS 注入到 DOM 中，使其在页面中生效。

5. 使用插件（Plugins）¶

插件（Plugins）用于执行更广泛的任务，如优化、压缩、环境变量注入等。下面是一个使用 HtmlWebpackPlugin 插件来自动生成 HTML 文件的示例：

// webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App', // HTML 文件的标题
      template: './src/index.html', // 模板文件
    }),
  ],
};

5.1 `HtmlWebpackPlugin`¶

HtmlWebpackPlugin 插件会自动生成一个 HTML 文件，并将打包后的 JavaScript 文件自动注入到 HTML 中。在上面的配置中，template 属性指定了 HTML 模板文件的位置。

6. 代码示例¶

6.1 基本配置示例¶

// webpack.config.js

const path = require('path');

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

6.2 使用加载器示例¶

// webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

6.3 使用插件示例¶

// webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      template: './src/index.html',
    }),
  ],
};

7. 练习题¶

7.1 简单练习¶

创建一个简单的 Webpack 项目，配置 entry 和 output，并打包一个简单的 JavaScript 文件。

7.2 中等练习¶

在项目中引入 CSS 文件，并使用 style-loader 和 css-loader 来处理 CSS 文件。

7.3 复杂练习¶

使用 HtmlWebpackPlugin 插件自动生成 HTML 文件，并将打包后的 JavaScript 文件注入到 HTML 中。

8. 总结¶

通过本文的学习，你应该已经掌握了 Webpack 的基本配置和使用。以下是本主题的关键点：

入口（Entry）：指定 Webpack 开始构建依赖图的起点。
输出（Output）：指定打包后的文件输出位置和文件名。
加载器（Loaders）：用于处理非 JavaScript 文件，如 CSS、图片等。
插件（Plugins）：用于执行更广泛的任务，如优化、压缩、环境变量注入等。

Webpack 是一个非常强大的工具，掌握它的基本配置和使用将极大地提高你的开发效率。希望你能通过本文的学习，进一步探索 Webpack 的更多高级功能。