14、Webpack与Webpacker：Rails项目中的前端构建利器

Webpack与Webpacker：Rails项目中的前端构建利器

1. 理解Webpack

1.1 查看Webpack配置

虽然Yarn帮助我们管理依赖项，但Webpack使我们能够在代码中引用这些依赖项。在项目中谈论Webpack有点棘手，因为它的行为取决于其配置文件，而Rails Webpacker会根据不同输入生成该配置文件，我们通常看不到实际的Webpack配置文件。不过，有一个部分解决方法可以打印出配置文件（至少是大部分），步骤如下：
1. 打开 config/webpack/development.js 文件。
2. 在脚本末尾添加以下代码：

Object.defineProperty(RegExp.prototype, "toJSON", {
    value: RegExp.prototype.toString
});
console.log(JSON.stringify(module.exports, null, 2))

添加上述代码后，运行 bin/webpack 命令，就能在终端窗口看到整个Webpack配置。

1.2 Webpack主要概念

1.2.1 模式（Mode）

Webpack只关注两种模式：开发（development）和生产（production）（严格来说，也可以将模式设置为none，但不建议这样做）。该设置会设置 NODE_ENV 环境变量，代码中会使