核心概念 | Core Concepts

核心概念

webpack是现代JavaScript应用程序的模块打包程序。当webpack处理您的应用程序时，它会递归地构建一个依赖图，其中包含您的应用程序需要的每个模块，然后将所有这些模块打包到少量的捆绑包中 - 通常只有一个 - 将由浏览器加载。

这是一种极好的可配置，但要开始您只需要了解四个核心概念：入口，输出，加载器和插件。

本文档旨在对这些概念进行高级概述，同时提供指向具体概念特定用例的链接。

入口

webpack会创建一个所有应用程序依赖关系的图表。该图的起点被称为入口点。该入口点通知的WebPack 从哪里开始，并遵循相关性的图表知道捆绑什么。您可以将应用程序的入口点视为上下文根或第一个启动应用程序的文件。

在webpack中，我们使用webpack配置对象中的属性定义入口点。entry

最简单的例子如下所示：

webpack.config.js

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

有多种方法可以声明entry属性，这些方法特定于您的应用程序的需求。

了解更多

出口

就算你与所有资产捆绑在一起，你仍然需要告诉的WebPack 哪里捆绑您的应用程序。webpack output属性告诉webpack 如何处理捆绑代码。

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我们的包的名称以及我们希望将其发送到的位置。

您可能会看到术语发射或发射在我们的文档和插件API使用。这是'produced'或'discharged'的一个奇特的术语。

该output属性具有更多可配置的功能，但我们需要花点时间理解该output属性的一些最常见用例。

了解更多

Loaders

目标是让项目中的所有资产都成为webpack的关注点，而不是浏览器的（尽管，要清楚的是，这并不意味着它们都必须捆绑在一起）。webpack将每个文件（.css，.html，.scss，.jpg等）视为一个模块。但是，webpack本身只理解JavaScript。

webpack中的加载程序在 将这些文件 添加到依赖关系图中时将这些文件转换为模块。

在高层次上，loaders在你的webpack配置中有两个目的。分别为：

确定哪个或哪些文件应由某个Loader转换。（test属性）

转换这些文件，以便可以将它们添加到您的依赖关系图（最终您的包）。（use属性）

webpack.config.js

const path = require('path'

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

上面的配置为具有两个必需属性（test和use）的单个模块定义了一个rules属性：。这告诉webpack的编译器如下信息：

“嘿，webpack编译器，当你遇到一个解析为require（）/ import语句内部的'.txt'文件的路径时，在将它添加到bundle之前，使用raw-loader进行转换。” 重要的是要记住，在webpack配置中定义规则时，您需要在module.rules下定义它们，而不是规则。为了你的好处，如果这样做不正确，webpack将'吼你'。

还有其他更具体的属性可以在Loaders上定义我们尚未涉及的属性。

了解更多

插件

虽然Loaders仅以每个文件为基础执行转换，但插件通常用于在捆绑模块（以及更多！）的“编译”或“块”上执行操作和自定义功能。 webpack Plugin系统功能强大且可定制。

为了使用插件，您只需要（）它并将其添加到插件数组中。大部分插件都可以通过选项进行定制。既然你可以在一个配置中多次使用一个插件来达到不同的目的，你需要通过用new来调用它来创建它的一个实例。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin' //installed via npm
const webpack = require('webpack' //to access built-in plugins
const path = require('path'

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin{template: './src/index.html'})
  ]
};

module.exports = config;

有很多webpack提供的插件！查看我们的插件列表以获取更多信息。

在webpack配置中使用插件很简单 - 但是，有很多值得进一步探索的用例。

了解更多