webpack 是一个现代 JavaScript 应用的模块打包器。它拥有难以置信的可配置性, 然而, 在你开始使用之前，以下 四个核心概念是你必须理解的 ！
做为你的webpack学习之旅的开始，我撰写这篇文章旨在通过介绍这些概念给你一个 高层次概述，同时也提供到这些概念特定用例的链接。
入口（Entry）
webpack建立了一个应用程序所有依赖的关系图。关系图的起点被称之为 _入口 _。 _入口 _告诉 webpack 从 _哪里开始 _，并顺着着依赖关系图知道 需要打包什么 。你可以将你的应用入口 认为是根上下文(contextual root) 或** app第一个启动文件**。
在webpack中，我们用entry属性定义入口 在我们的 webpack 配置对象中.
举个最简单的例子，如下:
webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js'
};
有多种方式去声明应用程序所需的特定 entry 属性。
了解更多!
出口（Output）
当你已经将所有的资源被打包到一起，我们仍需要告诉 webpack 在哪里（具体位置）打包我们的应用。wepback 的 output 属性描述了如何处理打包代码。
webpack.config.js
var 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 包的名称，以及我们想要打包文件生成的位置。
Tip:
你可能看到项目 生成 贯穿我们整个文档和插件 API。它是"生产或排放（produced or discharged）"的特殊术语。
output 属性具有更多可配置的特性，但先让我们花一点时间去了解 output属性的一些最常见的用例。
了解更多！
加载器(Loader)
webpack 的目标是：让webpack 来关注项目中的所有资源，而不是浏览器（这并不意味着资源都必须打包在一起）。 webpack 把 每个文件(.css, .html, .scss, .jpg, etc.) 都作为模块 处理。即便 webpack 只了解 JavaScript。
加载器在webpack中扮演着“将这些资源文件转化为模块”的角色，正如webpack将这些模块添加到你的依赖图中。
webpack 配置在更高层面中有两个目标。
- 识别出应该被特定的加载器转化的文件。（
test属性） - 转换能够被添加到依赖图表的文件（并且最终打包）(
loader属性)
webpack.config.js
var 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;
以上配置中，我们定义了单模块的rules属性的两个必选属性：test和 loader。它告诉 webpack 编译器如下：
"嘿，webpack 编译器，当你碰到「在
require()/import语句中被解析为 '.js' 或 '.jsx' 的路径」时，在你把它们添加并打包之前，要先使用 babel-loader 去转换他们"
特别需要注意的是在 webpack 配置中定义 loader 时，要定义在
module.rules中，而不是rules。否则，webpack会提示错误。
我们还有尚未提到的 loader，可以设定更多特定属性。
了解更多！
插件（ Plugins）
由于加载器仅基于单个文件处理转换，插件
则最常用于（但不限于）在打包模块的“编译”和“组块”时执行操作和自定义功能（查看更多）。webpack 的插件系统极其强大和可定制。
为了使用插件，你只需要 require() 它们，并且把它们添加到 plugins 数组。多数插件可以通过选项(option)自定义。由于你可以在一个配置多次使用插件用于不同的目的，因此你需要使用 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 提供了许多开箱可用的插件！欢迎查阅我们的插件列表,获得更多信息。
在 webpack 配置中插件是直接使用的，然而还是有很多用例值得我们深入探讨。
了解更多！
下一篇：入口