.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가 접두사로 사용됨).