webpack - 如何告诉 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并寻找值(value)？

Answer 1

首先要意识到你的 webpack 应用程序不是在服务器上运行，而是在客户端的浏览器中运行。虽然这 require call 看起来像是在运行时读取文件的调用，实际上它只是一个指令 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...
});