在我的代码中有如下构造:
var getMenu = function () {
return window.fetch("portal/content/json/menu.json").then(function (data) {
return data.json();
});
};
字符串
我在webpack.config.js
中尝试了以下操作:
module: {
loaders: [
...
{
test: /\.json$/,
exclude: /node_modules/,
use: [
'file-loader?name=[name].[ext]&outputPath=portal/content/json'
]
},
...
]
}
型
项目结构:
dist
content
json
menu.json <- this is missing
src
content
json
menu.json <- source file
型
问题:
Webpack如何将src/content/json/menu.json
复制到dist/content/json/menu.json
?
2条答案
按热度按时间vwoqyblh1#
您使用
fetch
请求JSON文件,这只会在运行时发生。此外,webpack只处理导入的任何内容。您希望它处理函数的参数,但如果webpack这样做了,函数的每个参数都将被视为模块,这会破坏该函数的任何其他用途。如果你想让你的加载器启动,你可以导入文件。
字符串
您也可以导入JSON并直接使用它,而不是在运行时获取它。Webpack 2默认情况下对所有
.json
文件使用json-loader
。您应该删除.json
规则,然后按如下方式导入JSON。型
menu
是您从getMenu
函数中获得的同一个JavaScript对象。ddarikpa2#
如果你希望你的json在运行时/延迟加载,你可以使用awesome webpack的动态导入功能:
字符串
它将返回一个Promise,它解析为模块对象,其中“default”字段包含您的数据。因此,您可能需要这样的东西(在es6中看起来真的很好):
型
注意,动态导入需要一个babel插件
syntax-dynamic-import
,使用npm安装它:型