概念

webpack 的核心是一个用于现代 JavaScript 应用程序的静态模块捆绑器。当 webpack 处理您的应用程序时，它会在内部从一个或多个入口点构建一个依赖关系图，然后将项目所需的所有模块组合到一个或多个捆绑包中，这些捆绑包是用于提供内容的静态资产。

从 4.0.0 版本开始，webpack 不再需要配置文件来捆绑您的项目。尽管如此，它仍然可以高度配置以更好地满足您的需求。

要开始使用，您只需要了解它的核心概念

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

本文档旨在对这些概念进行概述，并提供指向详细概念特定用例的链接。

为了更好地理解模块捆绑器背后的理念以及它们的工作原理，请参考以下资源

• 手动捆绑应用程序
• 实时编码基本模块捆绑器
• 基本模块捆绑器的详细说明

入口

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

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

webpack.config.js

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

输出

输出 属性告诉 webpack 将其创建的包 放在哪里以及如何命名这些文件。它默认为主输出文件 ./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 我们包的名称以及我们希望它被输出到哪里。如果您想知道在顶部导入的路径模块，它是一个核心 Node.js 模块，用于操作文件路径。

加载器

开箱即用，webpack 仅理解 JavaScript 和 JSON 文件。加载器 允许 webpack 处理其他类型的文件并将它们转换为有效的 模块，这些模块可以被您的应用程序使用并添加到依赖关系图中。

从高层次上讲，加载器 在您的 webpack 配置中具有两个属性。

1. test 属性标识应转换哪些文件。
2. 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' 文件的路径时，使用 raw-loader 在将其添加到包之前对其进行转换。”

您可以在 加载器部分 中查看在包含加载器时的进一步自定义。

插件

虽然加载器用于转换某些类型的模块，但插件可以用来执行更广泛的任务，例如包优化、资产管理和环境变量的注入。

为了使用插件，你需要使用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 文件，并自动将所有生成的包注入到该文件中。

在你的 webpack 配置中使用插件非常简单。但是，还有许多值得进一步探索的用例。在这里了解更多信息。

模式

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

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

在这里了解更多关于模式配置以及每个值所进行的优化。

浏览器兼容性

Webpack 支持所有符合 ES5 标准的浏览器（不支持 IE8 及更低版本）。Webpack 需要Promise才能使用import()和require.ensure()。如果你想支持旧版浏览器，你需要在使用这些表达式之前加载一个 polyfill。

环境

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