概念

本质上，webpack 是一个针对现代 JavaScript 应用程序的静态模块打包器。当 webpack 处理你的应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将你的项目所需的每个模块组合成一个或多个bundle，这些 bundle 是用于提供内容的静态资源。

从 4.0.0 版本开始，webpack 无需配置文件即可打包你的项目。尽管如此，它仍然具有极高的可配置性，以更好地满足你的需求。

要开始使用，你只需理解其核心概念

入口
输出
加载器
插件
模式
浏览器兼容性

本文旨在高层次地概述这些概念，同时提供指向详细的特定概念用例的链接。

为了更好地理解模块打包器背后的思想及其内部工作原理，请查阅以下资源

入口

一个入口点指示 webpack 应该使用哪个模块来开始构建其内部依赖图。webpack 会找出该入口点直接和间接依赖的其他模块和库。

默认情况下，它的值是 ./src/index.js，但你可以通过在 webpack 配置中设置 entry 属性来指定一个或多个不同的入口点。例如

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js',
};

输出

output 属性告诉 webpack 在何处输出其创建的bundle以及如何命名这些文件。对于主输出文件，默认值是 ./dist/main.js，对于任何其他生成的文件，默认输出到 ./dist 文件夹。

你可以通过在配置中指定一个 output 字段来配置此过程

webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

在上面的示例中，我们使用 output.filename 和 output.path 属性来告诉 webpack 我们的 bundle 的名称以及我们希望它输出到哪里。如果你想知道顶部导入的 path 模块，它是一个核心 Node.js 模块，用于操作文件路径。

加载器

开箱即用时，webpack 只理解 JavaScript 和 JSON 文件。加载器（Loaders）允许 webpack 处理其他类型的文件，并将它们转换为有效的模块，供你的应用程序使用并添加到依赖图中。

从高层次上看，在 webpack 配置中，加载器有两个属性

test 属性用于识别哪些文件应该被转换。
use 属性指示应该使用哪个加载器进行转换。

webpack.config.js

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

上述配置为一个模块定义了一个 rules 属性，其中包含两个必需的属性：test 和 use。这告诉 webpack 的编译器如下信息

“嘿，webpack 编译器，当你遇到一个在 require()/import 语句中解析为 '.txt' 文件的路径时，在将其添加到 bundle 之前，请使用 raw-loader 对其进行转换。”

在加载器部分，你可以查看包含加载器时的进一步自定义选项。

插件

加载器用于转换特定类型的模块，而插件可用于执行更广泛的任务，例如 bundle 优化、资产管理和环境变量注入。

要使用插件，你需要 require() 它并将其添加到 plugins 数组中。大多数插件都可以通过选项进行自定义。由于你可以在配置中多次使用同一个插件以实现不同目的，你需要使用 new 操作符来创建它的一个实例。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

在上面的示例中，html-webpack-plugin 为你的应用程序生成一个 HTML 文件，并将所有生成的 bundle 自动注入到该文件中。

在 webpack 配置中使用插件很简单。然而，还有许多值得进一步探索的用例。在此处了解更多信息。

模式

通过将 mode 参数设置为 development、production 或 none，你可以启用 webpack 内置的对应于每个环境的优化。默认值是 production。

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

在此处了解有关mode 配置的更多信息以及每个值会进行哪些优化。

浏览器兼容性

Webpack 支持所有ES5 兼容的浏览器（不支持 IE8 及以下版本）。Webpack 需要 Promise 来支持import() 和 require.ensure()。如果你想支持旧版浏览器，则在使用这些表达式之前需要加载一个 polyfill。

环境

Webpack 5 运行在 Node.js 10.13.0 及以上版本。

编辑此页面·打印此页面

入口点

概念

入口

输出

加载器

插件

模式

浏览器兼容性

环境

18 贡献者