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

【问题标题】：Webpack: Copy JSON-files via file-loaderWebpack：通过文件加载器复制 JSON 文件
【发布时间】：2015-12-09 14:14:52
【问题描述】：

我在编译时使用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-files 之间产生差异？

【问题讨论】：

*.json 文件 required 是否在任何地方？如果没有，它将无法正常工作。
啊！我以前需要它们，但现在我只是通过 ajax 加载它们！
如果你不想在主包中包含这些数据，你可以告诉 webpack 动态加载某些模块/数据：webpack.github.io/docs/code-splitting.html。
是的，我也一样。我想加载 json 内容并将其复制到我的公共目录。怎么样？

标签： javascript json webpack

【解决方案1】：

这是my answer 对我自己的类似问题的改编。

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

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

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

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

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

由于 file-loader 发出文件加载器所在的路径，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);
});

【讨论】：