概念(Concept)

本质上,webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。Webpack 在处理你的应用程序时,它会在内部构建一个映射应用程序所需的每个模块的依赖图谱,并生成一个或多个打包文件。

可去 此处 了解有关 JavaScript 模块和 Webpack 模块的更多信息。

从 4.0.0 版本开始,webpack 打包你的项目不再必需要有一个配置文件,但它可以非常灵活地配置以更好地满足您的需求。

要上手,你只需理解其核心概念:

  • 入口(entry)
  • 输出(output)
  • 加载器(loader)
  • 插件(plugin)
  • 模式(mode)

本文档旨在给出这些概念的高度概述,同时提供具体概念特定用例的链接。

为了更好地理解模块打包工具背后的理念以及它们是如何在底层工作的,请参考以下资源:

入口

入口点(entry point)指示 webpack 应该从哪个模块开始构建其内部依赖关系图。webpack 将找出入口点依赖于哪些模块和库(直接和间接)。

默认情况下,其值为 ./src/index.js,但可通过在 webpack 配置 文件中设置 entry 属性来指定不同的(或多个入口点),例如:

webpack.config.js

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

可从 入口点 章节了解更多信息。

输出

output(输出)属性告诉 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.filenameoutput.path 属性告诉 webpack 我们的包的名称,以及我们想要将其保存至哪里。可能你疑惑于在顶部导入的 path 模块,它是一个核心 Node.js 模块,用于操作文件路径。

output 属性还有 很多可配置的功能,如果你想更多地了解 output 属性之后的概念,可以进一步阅读 输出 章节。

加载器

webpack 本身只能理解 JavaScript 文件,加载器(loader)使 webpack 能够处理其他类型的文件,并将它们转换为可由应用程序使用的有效模块,并添加它们至依赖图谱。

请注意,导入任何类型的模块(比如,.css 文件)的能力,是 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 属性,其具有两个必需的子属性(testuse)这告诉 webpack 的编译器如下信息:

“嘿,webpack 编译器,当你在 require()/import 语句中碰到一个解析为 '.txt' 文件的路径时,在将它加入到包中之前先使用 raw-loader 进行转换。“

重要的是要记住,在 webpack 配置中定义 rules 时,是在 module.rules 而不是 rules 下定义它们。如果你这样错误地做了时,webpack 会发出警告。

加载器章节,你可以查看如何在包含加载器时进一步的自定义。

插件

加载器被用来转换某些类型的模块,插件则可以用来执行更广泛的任务,如打包优化、资源管理和环境变量注入。

查看 插件接口 ,学习如何使用它去扩展 webpack 的功能。

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

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
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 提供了许多开箱即用的插件!具体可查看 插件列表

在 webpack 配置文件中使用插件很简单 - 但是,有许多用例值得进一步探索,去此处了解更多相关信息

模式

通过将 mode 参数设置为 developmentproductionnone,可以启用 webpack 的内置的对应于每种环境的优化选项。 默认值为 production

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

去此处 详细了解模式配置以及每种模式所采取的优化选项。

浏览器兼容性

webpack 支持所有 兼容 ES5 标准 的浏览器(不支持 IE8 及更低版本)。webpack 需要 Promise 用于 import()require.ensure()。 如果要支持旧版浏览器,则需要在使用这些表达式之前 加载 相应的 polyfill