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

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

您可以通过向Webpack配置添加以下代码来通过文件加载器复制JSON文件：

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);
});

Webpack：通过file-loader

1 个答案: