Webpack + Babel require 在全局范围内失败，但在函数内部工作答案

【问题标题】：Webpack + Babel require fails in global scope but works inside functionsWebpack + Babel require 在全局范围内失败，但在函数内部工作
【发布时间】：2017-05-04 12:34:11
【问题描述】：

我正在使用 webpack 1.12.14，并且不能将图像要求为全局常量，例如

const icon = require("icon.svg");
class TestClass {

它失败了 [错误：找不到模块 'icon.svg'] 代码：'MODULE_NOT_FOUND' }

Error: Cannot find module 'icon.svg'
at Function.Module._resolveFilename (module.js:325:15)
at Function.Module._load (module.js:276:25)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object.<anonymous> (Test.js:15:19)
at Module._compile (module.js:409:26)
at loader (PATH/node_modules/babel-register/lib/node.js:126:5)
at Object.require.extensions.(anonymous function) [as .js] (PATH/node_modules/babel-register/lib/node.js:136:7)

来自我的 webpack.config：

resolve: {
    modulesDirectories: ["web_modules", "node_modules", "images"]
},

和装载机：

 {
    test: /\.js(x?)$/,
    loader: "babel",
    exclude: /node_modules/,
    query: babelOptions
 },
 {
        test: /\.svg$/,
        loaders: [
            "file?name=[hash].[ext]"
        ]
    }

我的 babelOptions.js

exports.babelOptions = {
    presets: ["es2015", "react"]
 }

例如，我可以在函数或构造函数中要求：

class TestClass {
    constructor() {
       const icon = require("icon.svg");
    }
}

【问题讨论】：

我无法重现这个错误，我，使用 webpack 1.12.11 并且没有问题。我认为您应该尝试指定确切的路径，看看是否可行

标签： reactjs webpack require babeljs babel-register

【解决方案1】：

升级到 webpack 3.4 解决了它

【讨论】：