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

Question

我使用Webpack进行一个角4/类型记录项目，在我的一个模块中，我希望访问一个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('./../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...
});