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

【问题标题】：How to tell Webpack not to pack a config file如何告诉 Webpack 不要打包配置文件
【发布时间】：2017-11-08 18:10:08
【问题描述】：

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

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

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

它运行良好，但 webpack 将其打包，并在生成的 dist 中配置文件的值与 app.XXX.js 文件中的其余部分一起结束。

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

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

【问题讨论】：

我不确定我是否理解您的问题。你能把你的 config.json 文件加载到 webpack 中，然后用 DefinePlugin 在你的包中定义它的值吗？
这个想法是在运行时更改配置值，而不是编译时...

标签： webpack

【解决方案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...
});

【讨论】：