1.Introduction

原文地址：https://webpack.js.org/concepts/
翻译：xiyoki

webpack是一个针对现代JavaScript应用程序的 module bundler。它是可配置的。然而，在你正式开始前，有四个核心的概念你需要掌握。

Entry

webpack创建一幅与应用程序的所有依赖相关的图。这幅图的起点就是众所周知的entry point。entry point告诉webpack从哪里开始，并且跟随图中的依赖知道了应该去捆绑/打包（bundle）什么。你可以将应用程序的entry point想象成contextual root或开始你应用程序的第一个文件。

我们在webpack配置对象中用entry属性去定义entry point。

// webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
};

Learn more!

output

你一旦将所有资源（assets）打包在一起，你仍需告诉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，打包后文件的名称，以及将其发布到哪里去。

emitted或emit是与produced（生产）或discharged（排出）意思相近的术语。

Learn more!

Loaders

Loader的目的是让项目中所有的assets（静态资源）成为webpack相关，而非浏览器相关。（这并不意味着它们必须全部bundle在一起）。webpack将每个文件 (.css, .html, .scss, .jpg, etc.)看作是一个模块。但是，webpack只能识别JavaScript。

webpack中的loaders将这些文件转换成（它能识别的）模块，就好像它们被添加到依赖图中一样。

在webpack配置文件中，loaders有两个目标：

1. 识别什么样的文件应该被某个loader转换。(test property)
2. 转换文件，以致于该文件能够被加到你的依赖图中（最终加到你的bundle中）。(use property)

// 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 编译器下面的内容：

“嘿，webpack编译器, 当你在require()或import 语句中遇到（come across）能解析为'.js' 或 '.jsx' 文件的path时， 在你将其添加到bundle前，请使用babel-loader转换它。”

记住，当你在webpack配置文件中定义rules时，请将它们定义在module.rules下，而不是rules下。尽管当你做错时，webpack会提醒你。

Learn more!

Plugins

因为Loader只执行基于每个文件的转换，而plugins是（但不限于）被用在已打包成模块的"compilations" 或"chunks"上，用于执行操作和自定义功能。

为了使用plugin，你需要require()它，并且将其添加到plugins数组。大多数plugins通过选项自定义。由于在配置文件中，为了不同的目的，你可以多次使用同一个plugin，你需要通过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;

Learn more!