Javascript 在 Webpack 中加载静态 JSON 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43735486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load static JSON file in Webpack
提问by Leguest
I have somewhere in my code following construction:
我的代码中有以下构造：
var getMenu = function () {
return window.fetch("portal/content/json/menu.json").then(function (data) {
return data.json();
});
};
I tried in my webpack.config.jsthis:
我在我的webpack.config.js这个尝试：
module: {
loaders: [
...
{
test: /\.json$/,
exclude: /node_modules/,
use: [
'file-loader?name=[name].[ext]&outputPath=portal/content/json'
]
},
...
]
}
Project structure:
项目结构：
dist
content
json
menu.json <- this is missing
src
content
json
menu.json <- source file
Question:
题：
How can webpack copy src/content/json/menu.jsonto dist/content/json/menu.json?
webpack 如何复制src/content/json/menu.json到dist/content/json/menu.json?
回答by Michael Jungo
You're using fetchto request a JSON file and that will only happen at runtime. Furthermore, webpack only processes anything that is imported. You expected it to handle an argument to a function, but if webpack did that, every argument to a function would be considered a module and that breaks any other use for that function.
您正在使用fetch请求 JSON 文件，这只会在运行时发生。此外，webpack 只处理导入的任何内容。您希望它处理函数的参数，但如果 webpack 这样做，函数的每个参数都将被视为模块，这会破坏该函数的任何其他用途。
If you want your loaders to kick in, you can import the file.
如果您希望加载器启动，您可以导入该文件。
import './portal/content/json/menu.json';
You can also import the JSON and use it directly instead of fetching it a runtime. Webpack 2 uses json-loaderby default for all .jsonfiles. You should remove the .jsonrule and you would import the JSON as follows.
您还可以导入 JSON 并直接使用它，而不是在运行时获取它。Webpack 2json-loader默认用于所有.json文件。您应该删除该.json规则，然后按如下方式导入 JSON。
import menu from './portal/content/json/menu.json';
menuis the same JavaScript object that you would get from your getMenufunction.
menu与您从getMenu函数中获得的 JavaScript 对象相同。
回答by Roman86
if you'd like your json to be loaded in runtime/deferred you can use awesome webpack's dynamic importsfeature:
如果您希望您的 json 在运行时/延迟中加载，您可以使用 awesome webpack 的动态导入功能：
import(
/* webpackChunkName: "json_menu" */
'./portal/content/json/menu.json'
);
it will return a Promise which resolves to the module object, with "default" field containing your data. So you might want something like this (with es6 it looks really nice):
它将返回一个解析为模块对象的 Promise，其中“默认”字段包含您的数据。所以你可能想要这样的东西（使用 es6 看起来非常好）：
import(
/* webpackChunkName: "json_menu" */
'./portal/content/json/menu.json'
).then(({default: jsonMenu}) => {
// do whatever you like with your "jsonMenu" variable
console.log('my menu: ', jsonMenu);
});
Notice that dynamic imports require a babel plugin syntax-dynamic-import, install it with npm:
请注意，动态导入需要一个 babel 插件syntax-dynamic-import，请使用 npm 安装它：
npm i babel-plugin-syntax-dynamic-import -D
Have a nice day
祝你今天过得愉快
