Question

构建后我的代码中有一处：

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？

Answer 1

您正在使用fetch来请求JSON文件，而这只会在运行时发生。此外，webpack仅处理导入的任何内容。你期望它处理一个函数的参数，但是如果webpack这样做，函数的每个参数都将被视为一个模块，并且会破坏该函数的任何其他用途。

如果您希望装载机启动，可以导入文件。

import './portal/content/json/menu.json';

您还可以导入JSON并直接使用它，而不是将其作为运行时获取。对于所有.json文件，Webpack 2默认使用json-loader。您应该删除.json规则，然后按如下方式导入JSON。

import menu from './portal/content/json/menu.json';

menu与您从getMenu函数获得的JavaScript对象相同。

Answer 2

如果您希望在运行时/延迟加载json，则可以使用很棒的webpack的dynamic imports功能：

import(
    /* webpackChunkName: "json_menu" */
    './portal/content/json/menu.json'
);

它将返回一个Promise，该Promise解析为模块对象，其中的“ default”字段包含您的数据。因此，您可能想要这样的东西（使用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);
});

请注意，动态导入需要babel插件syntax-dynamic-import，请使用npm进行安装：

npm i babel-plugin-syntax-dynamic-import -D

祝你愉快

在Webpack

2 个答案: