原创翻译，转载请注明出处。
原文地址：https://webpack.js.org/concepts/
概念
Webkack是一个现代javascript程序的打包工具。它可以灵活配置，在开始使用之前，你应该理解它的4个核心概念。
作为学习webpack的一部分，这个文档的目的是给你一个这些概念的高层次的概述，同时会提供这些概念的详细用例连接。
入口（Entry）
Webpack会绘制一个你的应用的所有依赖的图。这个图的开发的地方被成为入口点（entry point）。这个入口点告诉webpack要从哪儿开始，并顺着依赖图来确定哪些东西需要打包。你可以把应用的入口点理解成上下文的根，或者开始应用的第一个文件。
在webpack的配置文件里，用entry属性来定义入口点。
最简单的例子如下：
webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js'
};
根据应用的需要，有多个方法去声明entry属性。
输出（output）
把应用的所有资源都打包在一起之后，你需要告诉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打包之后的包名和把它放在哪儿。
属性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: /\.(js|jsx)$/, use: 'babel-loader'}
]
}
};
module.exports = config;
上面的配置为一个module定义了rules属性，和它的两个必须属性：test，use。这个告诉webpack编译器以下信息：
“你好编译器，当你在require()/import声明里遇到了‘.js’或者‘.jsx’文件的时候，使用babel-loader来转换这些文件，让后把他们放到应用包里。”
当在webpack配置文件里定义rules的时候，要记住很重要的一点，他们要被定义在module.rules下，而不是rules。不管怎样，当你定义错误的时候webpack会通知你。
插件（Plugins）
因为Loaders只是执行转换每一个文件，plugins被经常用于（但不局限于）执行动作和对打包好的模块里的集合（compilations）或者块（chunks）定制各种功能。Webpack的plugin系统功能非常强大并且可以定制。
为了能使用plugin，你需要require()它，并且把它加入到plugins数组里。很多plugins可以通过参数进行定制。因为你可以在配置文件里多次使用它来实现不同的目的，所有需要用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: /\.(js|jsx)$/, use: 'babel-loader'}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
webpack提供了很多可以马上使用的plugins。
在你的webpack配置文件里使用plugins是非常简单的，当然有一些用例需要进行更深的探讨。
-- End --