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捆绑文件并将其传递给嵌入在bundle中的浏览器的指令。捆绑包本身作为普通文件提供给浏览器。

鉴于此，在运行时读取配置文件的简单任务变为：从服务器获取文件并在运行时解析它。幸运的是，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...
});

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

1 个答案: