javascript - webpack中如何解决动态请求？

Question

在我的项目中存在动态需求，一些代码:

var getFrames = require( '../../utils/images' );

module.exports = {
    frameStart: 4, // from 0
    frameStep: 0.033, // seconds
    frameRate: 27.7, // fps
    playRate: 0.1, // percantage
    frameCurrent: 0, // current frame
    frames: getFrames( 'which-ball-lands-first', 52 ),
    width: 320,
    height: 240
},

其中 getFrames 函数定义如下:

... 

var getFrames = function( folder, n ) {
  var total = getTotalPower( n );
  var frames = [], i;

  for ( i = 0; i <= n; i++ ) {
    frames.push( require( '../applications/' + folder + '/video/frame-' + getFrameNumber( i, total ) + '.jpg' ) );
  }

  return frames;
};

module.exports = getFrames;

但是在 webpack:build 任务中，对于某些模块将所有 jpg 图像包含到 build.js 文件中，有些模块仅包含部分图像...而有些模块所有图像都作为 Assets !

所有图像均为 jpg 文件。 如何解决这个问题并将所有图像包含到 build.js 中？

Answer 1

这可以通过 webpack Context 来完成.

首先，您必须定义上下文 require 语句:

var req = require.context("../applications/folder/video/", false, /^\.\/.*\.jpg$/);

这将包括 bundle 中的所有图像(我将第二个参数设置为 false，因为您的图像直接位于此文件夹中)。

然后将请求更改为req:

frames.push(req( '../applications/folder/video/frame-' + getFrameNumber( i, total ) + '.jpg'));

为了简单起见，我已将文件夹变量更改为固定名称，但如果需要，您可以迭代多个文件夹。