Haxe + Webpack导出空对象 [英] Haxe + Webpack exporting empty object

问题描述

我正在尝试在由Haxe编译器导出的JS上运行webpack-dev-server.我正在使用hxgenjs库将haxe输出拆分为单独的模块，并且尝试通过webpack合并它们(以使用热模块替换功能).一切似乎正常，但输出为空对象.这是我的 webpack.config.js :

I'm trying to run the webpack-dev-server on a JS exported by Haxe compiler. I'm using hxgenjs library to split the haxe output into separate modules and I'm trying to merge them by webpack (to use the hot module replacement functionality). Everything seems to be ok, but the output is empty object. This is my webpack.config.js:

module.exports = {
  entry: './build/Game-hxgenjs.js',
  mode: 'development',
  devtool: "inline-source-map",
  output: {
    filename: 'Game-webpack.js',
    path: path.resolve(__dirname, 'bin/js'),
    publicPath: '/bin/js/',
    libraryTarget: "umd",
    library: "MyLib"
  },
  devServer: {
    publicPath: '/bin/js/',
    compress: false,
    port: 8080,
    hot: true,
    inline: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers': '*'
    },
    proxy: {
       // some proxy settings
    }
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

入口js文件具有以下内容:

And the entry js file has something like this:

if (module.hot) module.hot.accept();
require("./Std")
var $import = require("./import_stub").default;
function base_navigation_elements_NavigationDotsContainer() {return require("./base/navigation/elements/NavigationDotsContainer");}
function base_navigation_elements_NavigationScore() {return require("./base/navigation/elements/NavigationScore");}
function custom_game_Manager() {return require("./custom/game/Manager");}
function base_navigation_elements_NavigationDot() {return require("./base/navigation/elements/NavigationDot");}
function library_Library() {return require("./library/Library");}
function platform_topbar_TopbarProxy() {return require("./platform/topbar/TopbarProxy");}
function base_navigation_Navigation() {return require("./base/navigation/Navigation");}
function base_navigation_elements_NavigationAnimation() {return require("./base/navigation/elements/NavigationAnimation");}
function base_navigation_elements_NavigationButton() {return require("./base/navigation/elements/NavigationButton");}
function base_navigation_elements_NavigationPreloader() {return require("./base/navigation/elements/NavigationPreloader");}
function base_navigation_elements_NavigationButtonSpaceBar() {return require("./base/navigation/elements/NavigationButtonSpaceBar");}
(custom_game_Manager().default).main();
exports["base"] = exports["base"] || {}
exports["base"]["navigation"] = exports["base"]["navigation"] || {}
exports["base"]["navigation"]["elements"] = exports["base"]["navigation"]["elements"] || {}
exports["base"]["navigation"]["elements"]["NavigationDotsContainer"] = (base_navigation_elements_NavigationDotsContainer().default)
exports["base"] = exports["base"] || {}
exports["base"]["navigation"] = exports["base"]["navigation"] || {}
exports["base"]["navigation"]["elements"] = exports["base"]["navigation"]["elements"] || {}
exports["base"]["navigation"]["elements"]["NavigationScore"] = (base_navigation_elements_NavigationScore().default)
exports["base"] = exports["base"] || {}
exports["base"]["navigation"] = exports["base"]["navigation"] || {}
exports["base"]["navigation"]["elements"] = exports["base"]["navigation"]["elements"] || {}
exports["base"]["navigation"]["elements"]["NavigationDot"] = (base_navigation_elements_NavigationDot().default)
exports["library"] = exports["library"] || {}
exports["library"]["Library"] = (library_Library().default)
exports["platform"] = exports["platform"] || {}
exports["platform"]["topbar"] = exports["platform"]["topbar"] || {}
exports["platform"]["topbar"]["TopbarProxy"] = (platform_topbar_TopbarProxy().default)
exports["base"] = exports["base"] || {}
exports["base"]["navigation"] = exports["base"]["navigation"] || {}
exports["base"]["navigation"]["Navigation"] = (base_navigation_Navigation().default)
exports["base"] = exports["base"] || {}
exports["base"]["navigation"] = exports["base"]["navigation"] || {}
exports["base"]["navigation"]["elements"] = exports["base"]["navigation"]["elements"] || {}
exports["base"]["navigation"]["elements"]["NavigationAnimation"] = (base_navigation_elements_NavigationAnimation().default)
exports["base"] = exports["base"] || {}
exports["base"]["navigation"] = exports["base"]["navigation"] || {}
exports["base"]["navigation"]["elements"] = exports["base"]["navigation"]["elements"] || {}
exports["base"]["navigation"]["elements"]["NavigationButton"] = (base_navigation_elements_NavigationButton().default)
exports["base"] = exports["base"] || {}
exports["base"]["navigation"] = exports["base"]["navigation"] || {}
exports["base"]["navigation"]["elements"] = exports["base"]["navigation"]["elements"] || {}
exports["base"]["navigation"]["elements"]["NavigationPreloader"] = (base_navigation_elements_NavigationPreloader().default)
exports["base"] = exports["base"] || {}
exports["base"]["navigation"] = exports["base"]["navigation"] || {}
exports["base"]["navigation"]["elements"] = exports["base"]["navigation"]["elements"] || {}
exports["base"]["navigation"]["elements"]["NavigationButtonSpaceBar"] = (base_navigation_elements_NavigationButtonSpaceBar().default)

这是自动生成的文件.问题是，当我运行webpack-dev-server时，它会生成它的东西..最后有下面这段代码:

this is automatically generated file. The problem is, when I run the webpack-dev-server, it generates it's things.. and at the end there's this chunk of code:

/***/ 0:
/*!********************************************************************************************************************!*\
  !*** multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./build/Game-hxgenjs.js  ***!
  \********************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

__webpack_require__(/*! C:\path\to\project\node_modules\webpack-dev-server\client\index.js?http://localhost:8080 */"./node_modules/webpack-dev-server/client/index.js?http://localhost:8080");
__webpack_require__(/*! C:\path\to\project\node_modules\webpack\hot\dev-server.js */"./node_modules/webpack/hot/dev-server.js");
__webpack_require__(/*! ./build/Game-hxgenjs.js */"./build/Game-hxgenjs.js");
module.exports = __webpack_require__(0);


/***/ })

/******/ });
});

其中

__webpack_require__(0) 

返回一个空对象，所以window.MyLib是一个空对象.当我在此处放置断点时，可以看到上一行:

returns an empty object, so window.MyLib is an empty object. When I put breakpoint at this place, I can see that the previous line:

__webpack_require__(/*! ./build/Game-hxgenjs.js */"./build/Game-hxgenjs.js"); 

实际上返回我需要的(所有从入口js文件导出的内容).有人可以帮我弄清楚发生了什么，模块"0"到底是什么?

actually returns what I need (all exported stuff from the entry js file). Can somebody help me to figure out what's going on and what exactly is the module "0"?

推荐答案

您很可能正在使用webpack5，它具有一个已知的错误:当普通的webpack构建和监视工作正常时， webpack5.x.x + webpack-dev-server 3.x.x 在devserver模式下将模块导出为空对象.

Most likely you are using webpack5, it has a known bug: webpack5.x.x + webpack-dev-server 3.x.x exports module as an empty object in devserver mode, when plain webpack build and watch works ok.

要修复安装"webpack-dev-server":"^ 4.0.0-beta.0&"； :

npm i webpack-dev-server@next -D

请不要在webpack-dev-server 4.xx 中将 devServer.publicPath 选项更改为 static :

Please not that in webpack-dev-server 4.x.x you need to change devServer.publicPath option to static:

  devServer: {
        static: path.join(__dirname, 'build'),
        hot: true,
    },

这篇关于Haxe + Webpack导出空对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！