Webpack概念¹

Webpack是为现代JavaScript应用²而生的模块打包器（Module Bundler）。它配置化能力非常强，但开始之前你要先了解四大核心概念。

作为你的webpack学习之路的一部分，我们写这个文档的目的是给你这些概念的一个高阶概览，同时还提供链接到概念详细的用户案例。

Entry

Webpack根据你的应用所有依赖建立一个图，图的起点就是一个入口点（Entry Point）。入口点告诉webpack依赖图（Dependency Graph）从何处开始和流动，应该打包什么东西。你可以认为应用的入口点就是概念上的根，或者是启动你的应用的第一个文件。

我们在webpack配置对象中用entry属性来定义入口点。最简单的例子如下：

webpack.config.js

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

根据你应用的需要，有多种方式来定义entry属性。学习更多！

Output

当你已经打包好了所有的资源，还是要告诉webpack哪里放置我们的应用。配置对象的output属性告诉webpack如何处理打包好的代码。

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描述了我们包的名称及我们想发表（emit）到哪里。

ℹ️你可能会在整个文档和plugin API中经常看到术语发表（emit），这是“产出或放出（produced or discharged）”的新鲜术语。

output属性有很多可配置的特性，不过我们先花点时间熟悉一下用户最常用的情况。学习更多！

Loaders

我们的目标是让项目中所有的资源成为webpack的关注点，而不是浏览器的。（这不是说要它们必须打包在一起。）Webpack把每一个文件（.css, .html, .scss, .jpg, etc.）当做是一个模块 3。但是，webpack本身只能理解JavaScript。

Webpack里面的loader转换这些文件为模块，然后把模块添加进依赖图中。

从一个高层次角度来说，loader在webpack配置中有两个目的：

识别出哪些文件应当被特定的loader转换。（test属性）
转换那个文件以添加到你的依赖图中（并最后打包到你的包）。（use属性）

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;

上面的配置中，我们使用两个必须的属性：test和use，为一个模块定义了一个rules属性。这将告诉webpack的编译器如下信息：

“嗨webpack编译器，当你在require()/import语句中遇到一个路径符合’.js’或者’.jsx’文件时，使用babel-loader来转换它，再添加到包里面”。

⚠️在你的webpack配置里定义rules时，要记得是定义在module.rules中，不是rules中。不过如果你错误的使用的话，webpack也会报错。

我们还没有讲到Loaders上还有很多详细的属性可以定义。学习更多！

Plugins

由于loaders只能针对文件来执行转换，plugins则是常用于（但不局限于），针对你打包过的模块（或者其他）的“编译过程（compilations）”或者“分块（chunks）”，执行动作和自定义的功能。Webpack的plugin系统是极其强大和可定制的。

要使用一个plugin，你只需要require()它，然后添加到plugins数组里面。大部分plugin是可以通过选项定制的。因为你可能会在一个配置中为了不同目的多次用到同一个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;

Webpack提供了很多创造性的plugins！查看plugins列表获取更多信息。

虽然在webpack配置中使用plugins是直截了当的，但未来还是有很多用户案例值得讨论的。学习更多！

¹. 译自https://webpack.js.org/concepts/ ，感觉Webpack2的文档比Webpack1强了几个档次😀。 ↩

². applications或者app统一翻译成应用。 ↩

³. module翻译为模块。 ↩

Webpack概念

Webpack概念¹

Entry

Output

Loaders

Plugins

results matching ""

No results matching ""

Webpack概念1

Entry

Output

Loaders

Plugins

results matching ""

No results matching ""

Webpack概念¹