[webpack3.8.1]Concepts-基础概念

P.S.:我在上面两篇译文中简要体验了一下webpack，大致了解了webpack是一个什么东西。从这一篇开始，我们填坑，对基本概念进行翻译。

Concepts

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into one or more bundles.

       webpack是为现代JavaScript程序的模块打包的一个静态工具。当webpack运行于你的工程时，它递归地构建一个包含你的程序的各个模块所需要的依赖图，然后打包所有的模块进入一个或多个捆绑之后的文件中。

It is incredibly configurable, but to get started you only need to understand four Core Concepts:

       这是难以置信的可配置性（恒宝感觉作者想说：“这是难以置信的骚操作”），但是开启webpack之旅，你只需要了解下面四个核心内容：

• Entry
• Output
• Loaders
• Plugins

This document is intended to give a high-level overview of these concepts, while providing links to detailed concept specific use cases.

       这篇文章希望带领大家鸟瞰一下所有的概念，同时提供各个详情的链接。

Entry （webpack入口点）

An entry point indicates which module webpack should use to begin building out its internal dependency graph. After entering the entry point, webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly).

       一个entry point指示WebPack应该从哪个模块开始建立其内部的依赖关系图。进入entry point后，webpack会找出那些入口点依赖的其他模块和库（直接依赖的和间接依赖的）。

Every dependency is then processed and outputted into files called bundles, which we'll discuss more in the next section.

       接下来，每一个依赖都将被执行和输出进bundles（打包后的文件），我们将在下一节中更多地讨论它。

You can specify an entry point (or multiple entry points) by configuring the entry property in the webpack configuration.

       使用webpack配置文件的方式，你可以指定一个入口点（或者多个入口点）。

Here's the simplest example of an entry configuration:

       这里是最简单的关于入口点配置的例子：

webpack.config.js

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

You can configure the entry property in various ways depending the needs of your application. Learn more in the entry points section.

       你可以根据你的需要以各种各样的方式对入口点进行配置，学习更多关于entry points的知识吧！

Output （输出）

The output property tells webpack where to emit the bundles it creates and how to name these files. You can configure this part of the process by specifying an output field in your configuration:

        output属性告诉webpack我们应当把打包后的文件发送到什么位置，如何命名这些文件。你可以在你的配置文件中配置一个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'
  }
};

In the example above, we use the output.filename and the output.path properties to tell webpack the name of our bundle and where we want it to be emitted to.

       在上面这个例子中，我们使用了output.filename和output.path属性来告诉webpack打包后的文件的名称以及它的存放位置。

You may see the term emitted or emit used throughout our documentation and plugin API. This is a fancy term for 'produced' or 'discharged'.

       您可能会看到术语emitted或emit在我们的文档和使用插件API中被通篇使用。这是“产生”或“释放”的一个奇特术语。

The output property has many more configurable features and if you like to know more about the concepts behind the output property, you can read more in the concepts section.

       该output属性具有更多可配置的功能，如果您想了解更多关于output属性背后的概念，可以在概念部分阅读更多内容。

Loaders （加载器）

Loaders enable webpack to process more than just JavaScript files (webpack itself only understands JavaScript). They give you the ability to leverage webpack's bundling capabilities for all kinds of files by converting them to valid modules that webpack can process.

       各种类型的加载器可以使webpack不仅能处理JS的文件（webpack本身只能理解JavaScript）他们可以让你能够利用webpack的打包功能来将所有类型的文件打包入webpack可以处理的有效的模块。

Essentially, webpack loaders transform all types of files into modules that can be included in your application's dependency graph.

       本质上，webpack加载器将所有类型的文件转换为可以包含在应用程序依赖图中的模块。

At a high level, loaders have two purposes in your webpack config. They work to:

       从更高一层的视角来观察，加载器在配置文件里干了两件事：

Identify which file or files should be transformed by a certain loader (with the test property).
Transform those files so that they can be added to your dependency graph (and eventually your bundle). (use property)

• 使用test属性来标明哪一类文件或者说哪个文件被某一种特定的加载器加载。
• 转换这些文件，以便可以将它们添加到您的依赖关系图（最终是您的包）

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;

The configuration above has defined a rules property for a single module with two required properties: test and use. This tells webpack's compiler the following:

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

"Hey webpack compiler, when you come across a path that resolves to a '.txt' file inside of a require()/import statement, use the raw-loader to transform it before you add it to the bundle."

       “嘿，webpack编译器，当你遇到一个路径，解析为一个.txt文件内的一个require()/ import语句，使用它raw-loader来转换它，然后再将其添加到包。

It is important to remember that when defining rules in your webpack config, you are defining them under module.rules and not rules. For your benefit, webpack will 'yell at you' if this is done incorrectly.

       请记住，在webpack配置中定义规则时，你应当使用module.rules而不是rules。为了您的利益，如果您写得不对，webpack会'吼你'。戳这里，学习更多吧！

Plugins （插件）

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks. Plugins range from bundle optimization and minification all the way to defining environment-like variables. The plugin interface is extremely powerful and can be used to tackle a wide variety of tasks.

       虽然加载器被用来转换某些类型的模块，插件可以用来执行更广泛的任务。插件的能力很牛，小到“捆绑优化和缩小”，大到“定义似环境的变量”都能搞定。该插件的接口是非常强大的，可以用来解决各种各样的任务。

In order to use a plugin, you need to require() it and add it to the plugins array. Most plugins are customizable through options. Since you can use a plugin multiple times in a config for different purposes, you need to create an instance of it by calling it with the new operator.

       为了使用插件你需要敲require()，然后添加它到插件数组中。大部分的差价是可以通过各种选项来定制化的（这里的定制化的感觉有点像DIY的感觉，或者说，通过设定一些参数，你就会发现，诶呀，这玩意儿就是为我量身打造的呀）。如果你想在一个配置中多次使用一个插件来达到不同的目的，你需要通过调用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;

There are many plugins that webpack provides out of the box! Check out our list of plugins for more information.

       webpack提供了很多插件！看看我们的插件列表了解更多信息。

Using plugins in your webpack config is straightforward - however, there are many use cases that are worth further exploration.

       在webpack配置中使用插件非常简单 - 但是，还有很多值得进一步探索的用例。戳这里了解一下吧。