Javascript 如何在webpack中将config.js文件作为外部文件（在运行时是必需的，而不是绑定的）

我是新来的网页包。我正在制作一个react应用程序，它将从外部config.js文件中读取文本并在UI上显示。我正在尝试创建一个外部config.js文件，我不想绑定它，但在运行时需要它。 这是我的webpack.config.js：

const path = require('path');
const html_plugin = require("html-webpack-plugin");

module.exports = {
    mode: 'development',
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname,'build'),
        filename: 'build.js'
    },
    externals: {
        config: './config.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            }
        ]
    },
    plugins: [new html_plugin({ template: './src/index.html' })]
}

module.exports = {
    title: 'ssup'
}

config.js与webpack.config.js位于同一目录中。 这是我的config.js：

const path = require('path');
const html_plugin = require("html-webpack-plugin");

module.exports = {
    mode: 'development',
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname,'build'),
        filename: 'build.js'
    },
    externals: {
        config: './config.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            }
        ]
    },
    plugins: [new html_plugin({ template: './src/index.html' })]
}

module.exports = {
    title: 'ssup'
}

以下是我在组件中使用config.js的方式：

import config from 'config';
 class ... {
      return <h1>{config.title}</h1>
 }

当我尝试运行此应用程序时，它在我的chrome控制台中显示以下错误：

build.js中的第681行包含以下内容：

eval("module.exports = ./config.js;\n\n//# sourceURL=webpack:///external_%22./config.js%22?");

这是我的package.json：

{
  "name": "react-from-scratch",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.10.2",
    "react-dom": "^16.10.2"
  },
  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-react": "^7.6.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.1",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.2"
  }
}

---

我做错了什么

这样做不需要任何网页配置。将配置保存为JSON，并在运行时而不是构建时获取它

---

另外，您使用这种技术想要实现什么？您的用例是什么？

我正在开发一个SPA，我的客户可以使用外部config.js自定义其行为。例如：他们可以设置日历上显示的日期格式，或者如果他们想在页面上显示日历或其他内容，或者更改页面标题等。下面是一个示例文件：

{calendarStartTime:9:00，calendarEndTime:19:00，homeScreenTitle:'Welcome'，}

。更改这些值中的任何一个并刷新页面都会反映应用程序中的这些更改。如果您仍然建议使用

fetch

，您可以给我一个示例代码，说明如何执行此操作。好的，因此

fetch

无疑是一种方法。您需要做3件事：（1）

JSON.stringify（您的配置对象）

并将其保存到

.JSON

文件中，然后将其上载到web服务器/CDN。（2） 使用

window.fetch

在运行时在应用程序中获取该文件。（3） 一定要把细节弄清楚。特别是CORS和

fetch

的异步性质。网上有无数关于这两个方面的例子和教程，但我不想把文件放在服务器或cdn上。我想将它作为

config.js

本地保存在build文件夹中。

build.js

文件应该在运行时从中读取。我们以前的应用程序是使用requireJs构建的，它们就是这样工作的。每次刷新页面时，构建文件都会从config.js中读取。是否有必要用webpack来复制它？首先，如果您的配置只包含数据，那么它不应该是JS。它应该是JSON。如果您的“配置”有函数、类和运行代码，那么它不是配置-它是代码，这是不同的。不过，您仍然可以加载它-只是不使用

fetch

。至于你的问题（不管它是JS还是JSON）：在构建之后把它放到

/build

，你就完成了。