.jsonファイルをwebpackと非同期でロードする

Question

.jsonファイルを非同期にロードしようとしています。 .jsファイルの例がありますが、私はtypescriptを使用しており、解決策を見つけることができません。

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

あなたのバンドルがどこにあるかわからないようです。

バンドル分割の使用を開始したら、設定でoutput.publicPathを設定する必要があります。 distディレクトリがブラウザでlocalhost/distと表示されている場合は、output.publicPathを/dist/に設定する必要があります（webpackがロードしようとしているファイルの先頭にpublicPathが付加されるため）。