相关疑难解决方法(0)

所以这是我目前通过ES6在webpack中导入图像和图标的工作流程:

import cat from './images/cat1.jpg'
import cat2 from './images/cat2.svg'
import doggy from './images/doggy.png'
import turtle from './images/turtle.png'

<img src={doggy} />

这很快变得混乱.这就是我想要的:

import * from './images'

<img src={doggy} />
<img src={turtle} />

我觉得必须有一些方法动态导入特定目录中的所有文件,因为他们的名称没有扩展名,然后根据需要使用这些文件.

有人看过这个,或者对最好的方法有任何想法吗？

更新:

使用选定的答案,我能够这样做:

function importAll(r) {
  let images = {};
  r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
  return images;
}

const images = importAll(require.context('./images', false, /\.(png|jpe?g|svg)$/));

<img src={images['doggy.png']} />

更新:答案:

我的误解是:

所有导入/必需的文件都将由loader转换.

但是,某些导入/必需的文件不需要转换.例如,已经处理了"node_module"中的js文件.因此,Babel装载机无需再次进行转换.这基本上就是我们在loader中需要"exclude:/ node_modules /"的原因.

同样,如果您知道要由加载器转换的文件,则可以使用"include".

简而言之,entry.js将包含所有导入/必需的文件.但在这些文件中,只有少数文件需要转换.这就是"装载机"引入"包括"和"排除"的原因.

我还不太清楚为什么我们需要在webpack的加载器中使用"include"或"exclude".

因为条目js文件总是需要递归地包含其导入/必需的js文件.所有导入/必需的文件都将由loader转换.如果是这种情况,为什么我们需要在装载机中"包含"或"排除"？

一个常见的情况是"exclude:/ node_modules /".令我困惑的是,如果条目js文件需要来自node_modules的一些文件,那么我们将排除node_modules.然后,最终的bundle文件将不包含node_modules中的requied文件.在这种情况下,最终的bundle.js将无法正常工作.我在这里错过了什么吗？

module.exports = {
  entry: [
    './index.js'
  ],
  output: {
    path: path.join(__dirname,"public"),
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel',
      exclude: /node_modules/,
      query: {
          presets: ['es2015']
        }
    }]
  }
}; 

谢谢

德里克

我在 Vue 中创建了一个简单的应用程序（使用 Webpack 模板），其中有一个轮播。我想做的是遍历所有图像static/images以创建该轮播。我知道这可能是一个愚蠢的问题，但我该怎么做呢？我需要执行GET请求吗？

我问的原因是因为我将把它交给一个客户端来托管在他们的服务器上。如果需要，他们希望能够自己向轮播添加其他图像。

任何帮助，将不胜感激。

我从vue和nuxt开始，我有一个使用vuetify的项目，并且试图修改轮播组件以从静态文件夹动态加载图像。到目前为止，我已经提出了：

    <template>
    <v-carousel>
        <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
    </v-carousel>
    </template>


    <script>
    function getImagePaths() {
        var glob = require("glob");
        var options = {
        cwd: "./static"
        };
        var fileNames = glob.sync("*", options);
        var items = [];
        fileNames.forEach(fileName =>
        items.push({
            'src': '/'+fileName
        })
        );
        return items;
    }
    export default {
        data() {
        return {items :getImagePaths()};
        }
    };

    </script>

当我对此进行测试时，我看到：

ERROR in ./node_modules/fs.realpath/index.js
Module not found: Error: Can't resolve 'fs' in '....\node_modules\fs.realpath'
ERROR in ./node_modules/fs.realpath/old.js
Module not found: Error: Can't resolve 'fs' in …