Question

我想导入一些可能不存在的静态文件。我想修改这些外部静态文件并将其加载到我的应用程序中，但是Webpack提供了“找不到模块”

我的文件夹结构在dev中是这样的：

src
- 静态
  - 配置
    - cfg.json
    - 文件夹1
      - file1.js
    - 文件夹2
      - file2.js
- 组件
  - Main.js

并在生产webpack中构建所有内容，然后复制静态资产，使文件夹结构如下：

config（内部具有相同的文件和文件夹，但之后可能会被删除或更改）
app.js
样式等

我想要做的是从Main.js中获取静态资产中config文件夹中的文件。

静态资产可能存在或不存在。因此，我尝试的是将'require'放入try / catch块中，在这种情况下，如果找不到所需的文件，则在catch中使用另一个流程。

我可以在Main.js（'../static/config/cfg.json'）中将此路径与require一起使用，但是Webpack捆绑了所有这些，因此，如果我在生产环境中修改config文件夹中的文件，在应用程序中看不到更改。

在生产和开发中，我可以访问http://localhost:3000/config/cfg.json或http://localhost:3000/config/folder1/file1.js的静态文件

我可以使用访存，但是我不知道如何读取file1.js中默认导出的变量，我只能使用FileReader以字符串形式读取整个文件。

通过获取，代码看起来真的很混乱。有什么方法可以使用require并选择相应的路径，而Webpack不会抛出“找不到模块”？

示例代码

try {
    let config = require('../static/config/cfg.json'); // if the cfg.json doesn't exist go straight to catch

    if (!config.active) {
        // throw error
    }

    // continue flow and read the js files
    // if the js files don't exist go straight to catch
}
catch(e => {
    // follow another flow
})

正如我说的那样，此代码有效，但是如果我在静态文件中修改生产中的任何内容，则不会看到更改，因为Webpack需要捆绑的文件。

我希望看到对我的外部文件所做的更改，但是Webpack需要使用它生成的静态文件。

提前谢谢！

编辑：-添加了webpack配置项---

// ------------------------------------
// Entry Points
// ------------------------------------


// config.clientDir is the 'src' folder
// main.js is a file located in the 'src' folder, where React.DOM is called.
// so APP_ENTRY_PATH = 'src/main.js'

// config.compiler.publicPath = /app-name/ui // in this format...

const APP_ENTRY_PATH = paths.base(config.clientDir) + '/main.js';

webpackConfig.entry = {
  app: __DEV__ ?
    [APP_ENTRY_PATH, `webpack-hot-middleware/client?path=${config.compiler.publicPath}__webpack_hmr`] :
    [APP_ENTRY_PATH],
  vendor: config.compiler.vendor
};

Answer 1

因为我找不到webpack的方法，所以我将文件从JS扩展名修改为JSON，然后使用fetch来获取JSON数据。

有关详情，请参见：

HERE

我可以将require与webpack一起用于外部文件吗？

1 个答案: