Загрузите файл .json асинхронно с webpack

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 

Thanks

Answer 1

Похоже, что веб-пакет не знает, где найти ваши пакеты.

Вы должны установить output.publicPath в своей конфигурации, как только вы начнете использовать расщепление пучков. Если ваш каталог dist доступен в браузере как localhost/dist, вы должны установить output.publicPath в /dist/ (так как publicPath будет прикреплен к файлам, которые пытается загрузить webpack).