非常教程

Webpack参考手册

概念 | Concepts

配置 | Configuration

你可能已经注意到,很少有 webpack 配置看起来很完全相同。这是因为 **webpack 的配置文件,是导出一个对象的 JavaScript 文件。**此对象,由 webpack 根据对象定义的属性进行解析。

因为 webpack 配置是标准的 Node.js CommonJS 模块,你可以做到以下事情

  • 通过 require(...) 导入其他文件
  • 通过 require(...) 使用 npm 的工具函数
  • 使用 JavaScript 控制流表达式。例如:?:运算符
  • 对于常用值使用 const 或者 var
  • 编写函数并执行函数用于生成配置文件中的一部分

适当时使用这些功能。

就算技术上说的通,但是在实际操作过程中应当避免的几点:

  • 在使用 webpack CLI 时访问 CLI 参数(而不是编写自己的 CLI 或使用--env
  • 导出非确定性值(调用webpack两次应导致相同的输出文件)
  • 写长式配置(而不是将配置分成多个文件)

从这个文档中删除最重要的部分是有很多不同的方式来格式化和设置你的webpack配置。关键是要坚持你和你的团队能够理解和保持的一致。

下面的例子描述了webpack的配置对象如何具有表现力和可配置性,因为此为代码:

最简单的配置

webpack.config.js

var path = require('path');

module.exports = {
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

多个目标

请参阅:导出多个配置

使用其他配置语言

webpack接受用多种编程和数据语言编写的配置文件。

请参阅:配置语言

Webpack

webpack 是一个模块打包器。webpack 处理带有依赖关系的模块,生成一系列表示这些模块的静态资源。

主页 https://webpack.js.org/
源码 https://github.com/webpack/webpack
发布版本 3.8.1

Webpack目录

1.指南 | Guides
2.接口 | API
3.概念 | Concepts
4.组态 | Configuration
5.装载 | Loaders