webpack 很不错的中文文档

webpack 是一个现代的 JavaScript 应用模块打包器(module bundler)。它有着难以置信的配置，然而，我们认为你必须在开始前先了解 4 个核心概念！

作为您的 webpack 学习旅程的一部分，我们写这篇文档目的在于向你传递这些概念的高度概述，同时仍然提供特定概念的相关用例。

入口(Entry)

webpack 将创建所有应用程序依赖关系(dependency)图表(graph)。图表的起点被称之为 入口起点(entry point)。入口起点告诉 webpack 从哪里开始，并遵循着依赖关系图表知道打包什么。可以将您的应用入口起点认为是 根上下文(contextual root) 或 app第一个启动文件。

在 webpack 我们在webpack 配置对象中使用 entry 属性来定义入口。

接下来我们看一个最简单的例子：

webpack.config.js

const config = {
  entry: './path/to/my/entry/file.js'
};

module.exports = config;

这里有多种方式声明应用程序所需的特定 entry 属性。

了解更多！

出口(Output)

一旦你已经将所有资源(assets) 打包在一起，我们仍然需要告诉 webpack 在哪里打包我们的应用。wepback 的 output 属性描述了如何处理打包代码。

webpack.config.js

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: './dist'
  }
};

在上面例子中，我们正在通过 output.filename 和 output.path 属性来描述 webpack 包的名称，以及我们想要生成(emit) 在哪里。

tip
你可能看到项目 生成(emitted 或 emit) 贯穿我们整个文档和插件 API。它是“生产(produced) 或排放(discharged)”的特殊术语。

output 属性具有更多可配置的特性，但让我们花一些时间了解 output 属性的一些最常见的用例。

了解更多！

加载器(Loader)

webpack 的目标是，让项目中的所有资源都成为 webpack 的关注点，而浏览器不需要考虑这些（这并不意味着资源都必须打包在一起）。 webpack 把每个文件(.css, .html, .scss, .jpg, etc.) 都作为模块处理。然而 webpack 只了解 JavaScript。

因为文件已被添加到了依赖图表，所以 webpack 加载器会将这些文件转换为模块。

webpack 配置在更高层面有两个目标。

识别出(identify)应该被特定的加载器转换(transform)的文件
转换能够被添加到依赖图表的文件（并且最终打包）(loader 属性)

webpack.config.js

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: './dist'
  },
  module: {
    loaders: [
      {test: /\.(js|jsx)$/, loader: 'babel-loader'}
    ]
  }
};

以上配置中，我们定义了 loader 的两个必选属性：test 和 loader。它告诉 webpack 编译器(compiler) 如下：

“嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 '.js' 或 '.jsx' 的路径」时，在你把它们添加并打包之前，要先使用 babel-loader 去转换”。

warning
重要的是要记得，在 webpack 配置中定义 loader 时，要定义在 module.loaders 中，而不是 loaders。

我们还有尚未提到的 loader，可以设定更多特定属性。

了解更多！

插件(Plugins)

由于加载器仅基于单个文件执行转换，插件最常用于（但不限于）在打包模块的“编译(compilation)”和“组块(chunk)”时执行操作和自定义功能（查看更多）。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 config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: './dist'
  },
  module: {
    loaders: [
      {test: /\.(js|jsx)$/, loader: 'babel-loader'}
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

webpack 提供许多开箱可用的插件！查阅我们的插件列表展示更多信息。

在 webpack 配置中使用插件是直接的，然而有很多用例值得我们深入讨论。

了解更多！