웹 팩을 사용하여 런타임에 리소스를 로드할 수 있는 방법이 있습니까?

웹 팩을 사용하여 런타임에 리소스를 로드할 수 있는 방법이 있습니까?

일반적인 Import/require 구문을 사용하여 다른 스크립트파일에서 참조하고 싶은 설정 내용이 포함된 .json 파일이 1개 있습니다.현재 웹 팩을 사용하여 이러한 종속성을 해결하고 번들하고 있습니다.그러나 이 파일은 실행 시 로드하고 싶기 때문에 실행 시 이 파일을 해결하고 로드할 수 있는 로더가 있었으면 합니다.아직까지는 제 요구에 딱 맞는 것을 찾지 못했습니다.

예:

var jQuery = require('jQuery');
var sol = require('some-other-lib');
var myConfig = require('/real/production/url/myconfig.json');

console.log(myConfig.myFavoriteSetting);

위의 예에서 저는 다음과 같이 하고 싶습니다.myconfig.json실행 시 확인 및 로드됩니다.

관련 질문:

• 웹 팩을 사용하여 CDN 또는 외부 벤더 javascript lib를 html 파일이 아닌 js 파일로 로드하는 방법
• 웹 팩 - 동적 요구 사항 및 경로
• 웹 팩을 사용하여 런타임에 동적으로 JS 파일 필요

당신이 원하는 것은 웹팩의 코드 분할을 요구하는 것이라고 생각합니다.'확인'한 모듈은 별도의 번들에 포함되며, 실행 시 '확인'이 실행되면 웹 팩 런타임은 자동으로 번들을 Ajax를 통해 가져옵니다.callback 구문을 확인하여 번들 로드가 완료되면 콜백이 실행됩니다.이 시점에서도 필요한 모듈이 필요합니다.사용할 수 있도록 하기만 하면 됩니다.

코드 분할은 웹 팩의 주요 기능 중 하나로, 언제든지 필요한 것만 로드할 수 있습니다.여러 번들을 최적화하는 플러그인 등이 있습니다.

Webpack 2에서는 System.import를 사용할 수 있습니다.Promise API를 사용합니다.AFAIK, 현재 브라우저에서 비동기/대기 코드를 실행할 수 있는 방법은 없습니다.Babel은 ES2015로 비동기/대기 변환만 가능하기 때문에 최신 버전의 Node(v6.x)에서만 실행할 수 있다고 생각합니다.변환된 코드가 생성기를 사용하기 때문에 브라우저는 아직 그것을 이해할 수 없다고 생각합니다.

System.import의 경우 일부 오래된 브라우저(IE 11 이하)에서는 Promise API를 폴리필해야 합니다.자세한 것은, polyfill.io 를 참조해 주세요.

브라우저에서 정말로 비동기/대기 기능을 사용하려면 ES2015에 대해 전체 폴리필을 수행할 수 있습니다.

파일(config.json)에서도 같은 케이스가 있었습니다.

Copy-Webpack-Plugin으로 복사하기로 했습니다.

new CopyWebpackPlugin([
    // Copy directory contents to {output}/
    { from: 'config.json' }
  ]) 

그 후 내 파일은 출력 빌드 디렉토리에 저장되었습니다.webpack.config 파일에서 파일을 참조하기 위해 'externals' 속성을 사용했습니다.

  externals: {
    'config': "require('./config.json')"
  }

config.json을 로드하는 js 파일:

import config from 'config'

'config' load require(.'/config.json)는 출력 빌드 디렉토리에 있는 로드 요구(.'/config.json)입니다.

어려운 건 알지만 내 문제에 대한 다른 해결책을 찾지 못했어.누군가 도움이 될지도 몰라.

편집

웹 팩을 사용하여 구축해야 했습니다.import config from 'config'그래서을 대체하게 되었습니다.

externals: {
    './config.json': "require('./config.json')"
  }

그리고.

var config = require('./config.json') //replace import config from 'config'

팩이 없어도 는 Javascript를 이해할 수 있습니다.var config = require('./config.json')그게 옳은 길이기 때문이죠

제가 웹팩으로 웹팩이 요.require('./config.json')「..」config.」config.되었을 때, 「.config.json은 합니다.

제가 원래 찾고 있던 동작은 Lazy Loading이라는 기능으로 기술되어 있는 것 같습니다.이 기능은 이전에 사용된 동적 가져오기를 대체하기 위해 사용됩니다.require.ensure동적 리소스를 가져오는 방법.

여기에서는 제 자신의 예를 제시하지 않기 때문에 커뮤니티 위키에서 이 답변을 투고하고 싶은 사람을 위한 답변으로 남겨두겠습니다.

웹 팩 5의 경우:

실행 시 컨피규레이션파일을 로드할 필요가 있다고 가정합니다. ★★config.json:

{
    "secret": "xxxccccvvvvXXXCCCVVV",
    "password": "1234567890"
}

또한 webpack.(config|common|prod|dev).js 파일:

const configFile = require('./path/to/your/config.json');
const { DefinePlugin } = require('webpack');
// ...rest of imports

function getConfig() { // Maybe move to a helper directory *shrugs*
   return JSON.stringify(configFile);
}

module.exports = {
...(rest of webpack configuration)

   plugins: [
      new DefinePlugin({
         common_config: DefinePlugin.runtimeValue(getConfig, true)
      })
   ]
}

마지막으로 eslint를 사용하는 경우 컴파일러가 불평하지 않도록 다음과 같이 추가합니다.

"globals": {
   "common_config": "readonly"
}

★★★★에 액세스 할 수 .common_config

언급URL : https://stackoverflow.com/questions/34777595/any-way-to-use-webpack-to-load-a-resource-at-runtime