332、Webpack学习笔记07 -【配置 、模块】 2020.04.22

1、配置

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

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

  • 通过 require(…) 导入其他文件
  • 通过 require(…) 使用 npm 的工具函数
  • 使用 JavaScript 控制流表达式,例如 ?: 操作符
  • 对常用值使用常量或变量
  • 编写和执行函数,来生成部分配置

请在合适的场景下使用这些功能。

虽然技术上可行,但应避免以下做法

  • 在使用 webpack 命令行接口(CLI)时,访问命令行接口(CLI)参数(应该编写自己的命令行接口(CLI),或 使用 –env
  • 导出不确定的值(调用 webpack 两次应该产生同样的输出文件)
  • 编写很长的配置(应该将配置拆分为多个文件)

这份文档中得出的最重要的收获是,你的 webpack 配置可以有许多不同的格式和风格。关键在于,为了便于你和你的团队易于理解和维护这些配置,需要保证一致性。

接下来的例子展示了 webpack 配置(webpack configuration)如何即具有表现力,又具有可配置性,这是因为配置即是代码:

2、基本配置

webpack.config.js

var path = require('path');

module.exports = {
  mode: 'development',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};
See: Configuration section for the all supported configuration options

3、多个 target

除了可以将单个配置导出为 object, function 或 Promise,还可以将其导出为多个配置。

查看:导出多个配置

4、使用其他配置语言

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

查看: 配置语言

5、模块

在 模块化编程 中,开发者将程序分解为功能离散的 chunk (discrete chunks of functionality),并称之为 模块

每个模块具有比完整程序更小的接触面,使得验证、调试、测试轻而易举。 精心编写的_模块_提供了可靠的抽象和封装界限,使得应用程序中每个模块,都具备了条理清楚的设计和明确的目的。

Node.js 从最一开始就支持模块化编程。 然而,web 的模块化支持正缓慢到来。 在 web 存在多种支持 JavaScript 模块化的工具,这些工具各有优势和限制。 webpack 基于从这些系统获得的经验教训,并将_模块_的概念应用于项目中的任何文件。

6、什么是 webpack 模块

与 Node.js 模块 相比,webpack _模块_能够以各种方式表达它们的依赖关系。下面是一些示例:

  • ES2015 import 语句
  • CommonJS require() 语句
  • AMD define 和 require 语句
  • css/sass/less 文件中的 @import 语句。
  • 样式(url(…))或 HTML 文件(< img src=…>)中的图片链接

webpack 1 需要特定的 loader 来转换 ES2015 import,然而在 webpack 2 中,这一切都是开箱即用的。

7、支持的模块类型

通过 loader,webpack 可以支持以各种语言和预处理器语法编写的模块。loader 描述了 webpack 如何处理 非 JavaScript 模块,并且在 bundle 中引入这些_依赖_。 webpack 社区已经为各种流行语言和语言处理器创建了 loader,包括:

  • CoffeeScript
  • TypeScript
  • ESNext (Babel)
  • Sass
  • Less
  • Stylus

其实还有很多!总的来说,webpack 提供了可定制的、强大和丰富的 API,允许在任何技术栈中使用 webpack,同时在开发、测试和生产环境下的工作流程中做到无侵入性。

有关完整列表,请参考 loader 列表 或 编写 你自己的 loader

8、参考文献

[01] 配置 - Webpack官方文档
[02] 模块 - Webpack官方文档

发布了350 篇原创文章 · 获赞 230 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/youyouwuxin1234/article/details/105688382
今日推荐