使用 webpack 异步加载 .json 文件

Question

我正在尝试异步加载 .json 文件。有 .js 文件的示例，但我使用的是打字稿，似乎找不到解决方案。

webpack.config.js

var webpack = require('webpack');

module.exports = {
    entry: "./src/app.ts",
    output: {
        path: './dist',
        filename: "bundle.js"
    },
    resolve: {
        extensions: ['', '.ts', '.tsx', '.js', '.jsx', '.json']
    },

    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },
            { test: /\.ts$/, loader: 'ts-loader'},
            { test: /\.json$/, loader: 'json-loader'},
            {
                test: /jquery\.min\.js$/, 
                loader: 'expose?jQuery'
            },
            {
                test: /jquery\.min\.js$/, 
                loader: 'expose?$'
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'window.$': 'jquery'
        })
    ]
};

app.ts

declare var require: {
    <T>(path: string): T;
    (paths: string[], callback: (...modules: any[]) => void): void;
    ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
};


require(['./assets/data.json'], function(data) {
    console.log(data); //doesn't log anything.
});

它在控制台中给出错误，

GET http://localhost:5557/1.bundle.js 404 (Not Found)

但是，如果我不尝试异步，它工作正常，

console.log(require('./assets/data.json')); // logs the json just fine

谢谢

Answer 1

看起来 webpack 不知道在哪里可以找到你的包。

开始使用捆绑拆分后，您必须在配置中设置 output.publicPath。如果你的 dist 目录在浏览器中作为 localhost/dist 可用，你必须将 output.publicPath 设置为 /dist/ （因为 publicPath 将作为 webpack 尝试加载的文件的前缀） .

使用 webpack 异步加载 .json 文件

Load a .json file asynchronously with webpack

typescript

webpack

ts-loader