Webpack：通过文件加载器复制 JSON 文件

Question

我正在使用 Webpack module.loaders，并file-loader在编译时复制几个 js 文件：

module.loaders = [
    { test: /app\/locale\/moment\/.*\.js$/, loader: "file-loader?name=locale/moment/[name].[ext]" }
];

这对我来说效果很好。
我想对 JSON 文件做同样的事情：

module.loaders = [
    { test: /app\/locale\/.*\.json$/, loader: "file-loader?name=locale/[name].[ext]" }
];

但这一次它什么也没做。
为什么 Webpack 在使用文件加载器时会区分 js 文件和 json 文件？

Answer 1

这是我的答案的改编这是我对我自己的类似问题的

您可以通过文件加载器复制 JSON 文件，方法是将以下代码添加到 Webpack 配置中：

module: {                                                                    
    rules: [  
    // ...  
    {                                                                        
       test: /\.json$/,                                                       
       loader: 'file-loader?name=[name].json'                                 
    }
    // ...
    ]
}

这里有两个细微差别：1）文件加载器只会复制代码中某处导入/需要的文件，2）文件加载器发出文件加载位置的路径，而不是文件本身的内容。

因此，要复制 JSON 文件，您首先需要导入它，例如：

const configFile = require('../config.json');

由于文件加载器发出文件加载器所在位置的路径，因此configFile具有值"/config.json"。

现在可以按照您喜欢的方式加载 JSON 文件的内容，例如使用jsonfile

jsonfile.readFile(configFile, function(err, obj) {
    console.log(obj);
});

或者使用 Angular 的HTTP包

http.get(configFile).map(res => res.json()).catch((error: any): any => {
    // ...
}).subscribe(obj => {
    console.log(obj);
});