如何使用webpack-dev-server获取简单的Webpack捆绑并运行

我只是抓住了用webpack，webpack-dev-server和热模块重新加载构建我的开发环境的表面。我希望最终能够将反应组件添加到主要为静态的站点（这样我就可以获得可搜索的html的SEO优势，我已经决定不使用Gulp或Grunt，而是仅使用npm脚本运行shell命令来开发，测试，构建和发布如何使用webpack-dev-server获取简单的Webpack捆绑并运行

回到这个问题的标题/主题我一直没有能够让浏览器读取由webpack生成的我的bundle.js文件。煮了我的图书馆到最简单的index.html和index.js，你可以看到下面

错误输出到控制台：

Uncaught ReferenceError: handleClick is not defined 
at HTMLButtonElement.onclick ((index):7)

发射的bundle.js文件必须是错误所在：

/******/ (function(modules) { // webpackBootstrap 
/******/ // The module cache 
/******/ var installedModules = {}; 
/******/ 
/******/ // The require function 
/******/ function __webpack_require__(moduleId) { 
/******/ 
/******/  // Check if module is in cache 
/******/  if(installedModules[moduleId]) { 
/******/   return installedModules[moduleId].exports; 
/******/  } 
/******/  // Create a new module (and put it into the cache) 
/******/  var module = installedModules[moduleId] = { 
/******/   i: moduleId, 
/******/   l: false, 
/******/   exports: {} 
/******/  }; 
/******/ 
/******/  // Execute the module function 
/******/  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 
/******/ 
/******/  // Flag the module as loaded 
/******/  module.l = true; 
/******/ 
/******/  // Return the exports of the module 
/******/  return module.exports; 
/******/ } 
/******/ 
/******/ 
/******/ // expose the modules object (__webpack_modules__) 
/******/ __webpack_require__.m = modules; 
/******/ 
/******/ // expose the module cache 
/******/ __webpack_require__.c = installedModules; 
/******/ 
/******/ // define getter function for harmony exports 
/******/ __webpack_require__.d = function(exports, name, getter) { 
/******/  if(!__webpack_require__.o(exports, name)) { 
/******/   Object.defineProperty(exports, name, { 
/******/    configurable: false, 
/******/    enumerable: true, 
/******/    get: getter 
/******/   }); 
/******/  } 
/******/ }; 
/******/ 
/******/ // getDefaultExport function for compatibility with non-harmony modules 
/******/ __webpack_require__.n = function(module) { 
/******/  var getter = module && module.__esModule ? 
/******/   function getDefault() { return module['default']; } : 
/******/   function getModuleExports() { return module; }; 
/******/  __webpack_require__.d(getter, 'a', getter); 
/******/  return getter; 
/******/ }; 
/******/ 
/******/ // Object.prototype.hasOwnProperty.call 
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 
/******/ 
/******/ // __webpack_public_path__ 
/******/ __webpack_require__.p = ""; 
/******/ 
/******/ // Load entry module and return exports 
/******/ return __webpack_require__(__webpack_require__.s = 0); 
/******/ }) 
/************************************************************************/ 
/******/ ([ 
/* 0 */ 
/***/ (function(module, exports) { 

const handleClick =() => { 
    document.getElementById("demo").innerHTML = "Hello World!"; 
}; 

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

我的index.html文件：

<html> 
<body> 

<p id="demo">Simple JS demo</p> 

<script src="bundle.js"></script> 
<button type="button" onclick='handleClick()'>Click Me!</button> 

</body> 
</html>

我index.js文件：

const handleClick =() => { 
    document.getElementById("demo").innerHTML = "Hello World!" 
}

我的WebPack。 config.js文件：

const config = { 
    entry: './src/index.js', 
    output: { 
    filename: 'bundle.js', 
    path: '/home/andrew/code/my-site/public', 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.(js)$/, 
     exclude: /(node_modules)/, 
     use: { 
      loader: 'babel-loader', 
     } 
     } 
    ] 
    } 
}; 

module.exports = config;

我的npm start脚本：

"scripts": { 
    "start": "webpack-dev-server --content-base public/" 
    }

我已经在全球的WebPack安装这样我就可以生成公共/文件夹用命令webpack的bundle.js文件，虽然npm start发出bundle.js文件反正。

有一些简单的错误，我正在做。通过@Marek Takac

解决方案： 这里的错误是handleClick()功能的范围是不是全球性的。这可以通过从index.js文件

module.exports = { 
    handleClick: handleClick 
}

内出口的模块和使用的WebPack的output.library and output.libraryTarget选项来定义一个全局变量来弥补。

也见的WebPack的exports-loader

来源

2017-08-14 Drew2

你的WebPack束似乎是确定。问题出在你的代码中。函数未定义，因为您是从全局环境调用它的。您基本上尝试拨打window.hanldeClick，但您在完全不同的范围内定义了函数。 Webpack将这个功能放到单独的闭包中，以防止污染你的全球环境。我建议你通过一些webpack /反应教程，指南和文档。但是，如果您只想测试您的设置是否正确地从index.js文件中将某些内容记录到控制台中。或者我认为你的代码应该工作，如果你改变const handleClick为window.handleClick（虽然我从来没有尝试过这样的事情）。

来源

2017-08-14 18:57:05

感谢您的回复，我不认为范围是这里的问题。用索引替换公用文件夹中的我的bundle.js。js（以及脚本'src ='在html文件中），然后在浏览器中打开index.html文件（而不是使用webpack-dev-server提供），该脚本就可以工作。我还没有使用反应，并且我已经彻底地梳理了webpack文档... – Drew2

好吧，那么如果你从'index.js'文件中'console.log'的东西会发生什么呢？它实际上是否将任何内容记录到控制台？ –

@ Drew2这是一个范围问题。检查你的bundle.js，你会发现整个文件是新的作用域而不能访问全局变量。如果你真的会尝试我在我的回答中建议的内容，你会看到它的工作原理:) –

如何使用webpack-dev-server获取简单的Webpack捆绑并运行

回答

相关问题