[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配置中使用插件很是簡單 - 可是，還有不少值得進一步探索的用例。戳這裏瞭解一下吧。