- 常用配置解释说明
- 输出(output)
- loader
- 插件(plugin)
- 插件接口(plugin interface),学习如何使用它来扩展 webpack 能力。">Tip:查看 插件接口(plugin interface),学习如何使用它来扩展 webpack 能力。
- 模式(mode)
- 浏览器兼容性(browser compatibility)
- 环境(environment)
常用配置解释说明
入口(entry)
入口起点(entry point) 指示 webpack 应该使用哪个模块,来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。
默认值是 ./src/index.js,但你可以通过在 webpack configuration 中配置 entry 属性,来指定一个(或多个)不同的入口起点。
Tip:在 入口起点 章节可以了解更多信息。
根据经验:每个 HTML 文档只使用一个入口起点。具体原因请参阅此 issue。
输出(output)
output 属性告诉 webpack 在哪里输出它所创建的 bundle,以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js,其他生成文件默认放置在 ./dist 文件夹中。
你可以通过在配置中指定一个 output 字段,来配置这些处理过程
Tip:output 属性还有 更多可配置的特性,如果你想要了解更多关于 output 属性的概念,可以通过阅读 输出章节 来了解更多。注意,即使可以存在多个 entry 起点,但只能指定一个 output 配置
loader
webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 “load(加载)” 模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的得力方式。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS 文件!
Tip:在使用 loader 时,可以阅读 loader 章节 查看更深入的自定义配置。尽可能使用 module.rules,因为这样可以减少源码中样板文件的代码量,并且可以在出错时,更快地调试和定位 loader 中的问题。
插件(plugin)
loader 用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量。如果在插件中使用了 webpack-sources 的 package,请使用 require(‘webpack’).sources 替代 require(‘webpack-sources’),以避免持久缓存的版本冲突。
Tip:查看 插件接口(plugin interface),学习如何使用它来扩展 webpack 能力。
想要使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 new 操作符来创建一个插件实例。
模式(mode)
通过选择 development, production 或 none 之中的一个,来设置 mode 参数,你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
Tip:想要了解更多,请查阅 mode 配置,这里有具体每个值相应的优化行为。
浏览器兼容性(browser compatibility)
Webpack 支持所有符合 ES5 标准 的浏览器(不支持 IE8 及以下版本)。webpack 的 import() 和 require.ensure() 需要 Promise。如果你想要支持旧版本浏览器,在使用这些表达式之前,还需要 提前加载 polyfill。
环境(environment)
Webpack 5 运行于 Node.js v10.13.0+ 的版本。
