在 webpackEmptyContext 中找不到模块“../assets/logo.png”（在 ./src/component答案

【问题标题】：Cannot find module '../assets/logo.png' at webpackEmptyContext (eval at ./src/component在 webpackEmptyContext 中找不到模块“../assets/logo.png”（在 ./src/component
【发布时间】：2019-09-28 18:44:51
【问题描述】：

我正在尝试使用 props 将图像 url 加载到组件中，但似乎 require 不能接受任何变量。但是，如果我给 require 一个纯文本作为参数，它可以工作

这个给出错误

在 webpackEmptyContext 中找不到模块 '../assets/logo.png' （评估在 ./src/component

<template>
    <div>

        {{imagelink}}
        <div style="width: 150px; height: 150px; background-color: red">
            <img :src="imglink" alt="" height="150px" width="150px">
        </div>
    </div>
</template>

<script>
    export default {
        name: "ImageTest",
        props:{
            imagelink: String,
        },
        computed: {
            imglink: function () {
                // this.imagelink
                const modulepatha = '../assets/logo.png'
                return  require(modulepatha)
            }
        }
    }</script>

<style scoped>
</style>

这个有效：

<template>
    <div>

        {{imagelink}}
        <div style="width: 150px; height: 150px; background-color: red">
            <img :src="imglink" alt="" height="150px" width="150px">
        </div>
    </div>
</template>

<script>
    export default {
        name: "ImageTest",
        props:{
            imagelink: String,
        },
        computed: {
            imglink: function () {
                // this.imagelink
                const modulepatha = '../assets/logo.png'
                return  require('../assets/logo.png') //changed this
            }
        }
    }</script>

<style scoped>
</style>

请注意，我只将 require 中的值更改为纯文本

【问题讨论】：

这里有一个提示：stackoverflow.com/a/37241982/9541423

标签： vue.js webpack vue-component

【解决方案1】：

因为 webpack 是一个静态构建工具（它会在构建时找到所有需要的文件），所以 require 语句中的动态表达式不会起作用，因为 webpack 不知道要解决什么问题以及它存在的位置.

话虽如此，partial 表达式确实为 webpack 提供了足够的信息来加载文件：

imglink: function() {
  const {someImageName} = this; 
  return require("../assets/${someImageName}");
}

这会告诉 webpack：

嘿webpack，在这个部分路径中找到所有可以解析的可能模块，然后在运行时，当调用这个函数时，只提供与传入的名称对应的JS模块。

这是我在code splitting patterns talk 中提供的精美图表

如果您确实需要动态获取图像，我建议您不要为此使用require()。否则，请确保您要提供的图像在您的本地代码库中。

【讨论】：

嘿肖恩。快速提问。那你会推荐什么？
什么是解决方案？

【解决方案2】：

我遇到了同样的问题，发现 Webpack 是一个静态构建工具，所以我们不能正常使用动态需求。

但是关于解决方案：

解决方案 #1 使用 partial expressions（描述为 here）

但是使用 regx 会捆绑所有匹配的模块，这不是动态的，也可能不是您想要的。

解决方案 #2 适用于仅针对 node（而非浏览器）的情况：(source)

const requireFunc = typeof __webpack_require__ === "function" ? __non_webpack_require__ : require;
const foo = requireFunc(moduleName);

这样 webpack 会将普通节点 require 放在 bundle 上。

解决方案 #3 也仅适用于 node 目标。您可以创建一个native-require.js 文件，如下所示 (source)：

module.exports = require

并告诉 webpack 不要解析它，把它放在webpack.config.js:

module.exports = {
  "target": "node",
  "module": {"noParse": /native-require.js/}
}

然后您可以像这样导入 native-require ：const r = require('./native-require') 并使用它来动态导入您的模块。

我测试了 #2 和 #3 并且都有效。

【讨论】：