webpack 官方文档阅读笔记-JavaScript中文网-JavaScript教程资源分享门户

什么是 webpack？

webpack 是一个现代 JavaScript 应用程序的静态模块打包器。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个 bundle。

webpack 中包含了许多核心概念，例如：

Entry
Output
Loader
Plugin
Mode

我们将逐一学习这些概念。

Entry

Entry 是 webpack 打包的入口点，它指示 webpack 应该从哪个模块开始构建依赖关系图。在配置文件中，可以通过配置 entry 属性来指定入口点，例如：

module.exports = {
  entry: './src/index.js'
};

上述代码指示 webpack 从 ./src/index.js 开始构建依赖关系图。

Output

Output 属性用于定义 webpack 打包后的输出文件的名称和目录。在配置文件中，可以通过配置 output 属性来指定输出目录和文件名，例如：

const path = require('path');

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

上述代码指示 webpack 将打包后的文件输出到 ./dist/bundle.js。

Loader

Loader 用于处理非 JavaScript 文件（例如 CSS、图片等），并将其转换为可以通过 JavaScript import 导入的模块。在配置文件中，可以通过配置 module.rules 属性来指定 loader，例如：

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

上述代码指示 webpack 处理以 .css 结尾的文件时，使用 style-loader 和 css-loader。

Plugin

Plugin 用于扩展 webpack 的功能，例如提取公共代码、压缩输出文件等。在配置文件中，可以通过配置 plugins 属性来指定 plugin，例如：

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

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

上述代码指示 webpack 使用 HtmlWebpackPlugin 插件生成 HTML 文件。

Mode

Mode 用于告诉 webpack 如何优化打包输出，例如开启压缩、设置开发环境等。在配置文件中，可以通过配置 mode 属性来指定 mode，例如：

module.exports = {
  mode: 'production'
};

上述代码指示 webpack 开启生产环境模式，以优化打包输出。

总结

webpack 是一个非常强大的静态模块打包器，可以帮助我们将应用程序打包成一个或多个 bundle。通过学习 webpack 的核心概念，我们可以更加深入地了解 webpack 的原理，并能够针对具体的需求进行配置。

在实际应用中，我们可能需要使用到多个 loader 和 plugin，因此需要仔细阅读官方文档，并根据具体需求进行选择和配置。

示例代码：https://github.com/example/webpack-demo

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a33ce9add4f0e0ffb596a0

webpack 官方文档阅读笔记