如何告诉 Webpack 不打包配置文件

Question

我正在将 Webpack 用于 Angular 4/TypeScript 项目，在我的一个模块中，我想访问一个config.json文件，其中包含一些必须在服务器上可配置的值（即，可以在运行时更改而不是固定在服务器上的配置值）编译时间）。

在我的来源中，我使用该文件来引用

let config = require('./../relative/path/config.json');

它工作得很好，但 webpack 将其打包，最终dist配置文件的值与文件中的其余部分一起结束app.XXX.js。

我尝试webpack.common.js通过将文件添加到 中来标记该文件（由其他 webpack 配置文件引用）externals，但这不会改变任何内容。我本来希望 webpack 不会打包该文件，而是将其按原样部署到dist目录中。

问题：我可以拥有我的config.json, 并让 webpack不打包它而只是部署它，以便我可以在部署时修改或替换文件，而不是打开app.XXX.js和搜索值吗？

Answer 1

首先要认识到的是，您的 webpack 应用程序不是在服务器上运行，而是在客户端的浏览器中运行。虽然这个require调用看起来像是在运行时读取文件的调用，但实际上它只是一个指令，让 webpack 捆绑一个文件并将其传递给嵌入在捆绑包中的浏览器。捆绑包本身作为浏览器的纯文件。

鉴于此，在运行时读取配置文件的简单任务就变成：从服务器获取文件并在运行时解析它。幸运的是，webpack 有专门的基础设施来做到这一点：import()。

import('./../relative/path/config.json').then(config => {
  // Do something with 'config'
})

或者，如果您仍在使用旧版 JavaScript，则可以使用旧版require.ensure()。

require.ensure(['./../relative/path/config.json'], function(require) {
  let config = require('./../relative/path/config.json');
  // Do something special...
});