Did you know …? 15 less known webpack features in 15 minutes

这篇文章介绍了Webpack的15个不太为人知的特性，旨在通过简短的时间让读者了解并学习到新内容，并辅以代码示例。 1. **Electron目标配置**： - Webpack支持编译Electron应用，自动处理代码分割。 -.dumpTarget设置为"electron-main"或"electron-renderer"。 2. **动态导入（Import()）**： - Webpack 3引入按需加载模块的新语法，支持Chrome和Safari。 - 使用魔术注释指定Chunk名称和加载模式，如： - `/* webpackChunkName: "route-[request]" */` - 可选模式包括`lazy`, `lazy-once`, `eager`, 和`weak`。 3. **模块标识插件**： - **NamedModulesPlugin**：将模块ID替换为文件路径，便于调试，但可能泄露文件结构。 - **HashedModulesPlugin**：用哈希代替ID，避免泄露结构，但增加包大小。 4. **模块别名（resolve.alias）**： - 定义模块路径别名，常用于替换依赖、修正导入路径或定义应用根目录。 - 示例配置修改模块请求路径，如Redirect "underscore"到"lodash"。 这些特性通过代码示例展示了如何优化模块加载、包大小和开发调试体验，帮助开发者更高效地使用Webpack。