基本概念

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 配置在更高层面中有两个目标。

1. 识别出应该被特定的加载器转化的文件。（test 属性）
2. 转换能够被添加到依赖图表的文件（并且最终打包）(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 配置中插件是直接使用的，然而还是有很多用例值得我们深入探讨。

了解更多！

下一篇：入口