Browser 如何使用WebpackDev服务器建立并运行简单的WebpackBundle

我只是用webpack、webpack开发服务器和热模块重新加载来构建我的开发环境。我希望最终能够将react组件添加到一个主要是静态的站点（这样我就可以获得可爬行html的SEO好处。我决定不使用Gulp或Grunt，而只使用npm脚本来运行开发、测试、构建和发布的shell命令

回到这个问题的标题/主题。我无法让浏览器阅读由webpack生成的bundle.js文件。我已经将我的库简化为最简单的

index.html

和

index.js

，您可以在下面看到

控制台的错误输出为：

发出的

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

文件：

简单的JS演示
点击我！

我的

index.js

文件：

consthandleclick=（）=>{
document.getElementById（“demo”）.innerHTML=“你好，世界！”
}

我的

webpack.config.js

文件：

const-config={
条目：'./src/index.js'，
输出：{
文件名：“bundle.js”，
路径：'/home/andrew/code/my site/public'，
},
模块：{
规则：[
{
测试：/\（js）$/，
排除：/（节点\模块）/，
使用：{
加载器：“巴别塔加载器”，
}
}
]
}
};
module.exports=config；

我的

npm启动

脚本：

“脚本”：{
“开始”：“网页包开发服务器--内容库公共/”
}

我在全球安装了webpack，因此我可以使用命令

webpack

在

public/

文件夹中生成

bundle.js

文件，尽管

npm start

以任何方式发出

bundle.js

文件

一定是我犯了一些简单的错误

通过@Marek Takac:解决方案 这里的错误是

handleClick（）

函数的作用域不是全局的。这可以通过从

index.js

文件中导出模块来解决

module.exports={
handleClick：handleClick
}

并使用webpack的选项定义一个全局变量

---

另请参见webpack的

your's webpack bundle似乎没有问题。问题在于您的代码。

handleClick

函数未定义，因为您是从全局环境调用它的。您基本上尝试调用

窗口。handleClick

但您在完全不同的范围内定义了

handleClick

函数。webpack将函数分为单独的闭包，以防止污染您的全球环境。我建议您阅读一些webpack/react教程、指南和文档。但是，如果您只想测试您的设置是否正确，请从

index.js

文件将某些内容注销到控制台。或者，我认为您的代码应该如果您将

const handleClick

更改为

window.handleClick

（尽管我从未尝试过类似的方法），则ld可以工作.

您的网页包似乎还可以。问题在于您的代码。

handleClick

函数未定义，因为您是从全局环境调用它的。您基本上尝试调用

窗口。hanldeClick

但您在完全不同的范围内定义了

handleClick

函数。网页包将该函数放入sep关闭以防止污染您的全球环境。我建议您阅读一些webpack/react教程、指南和文档。但是，如果您只是想测试您的设置是否正确，请从

index.js

文件将某些内容注销到控制台。或者，我认为如果您更改，您的代码应该可以工作

const-handleClick

到

window.handleClick

（尽管我从未尝试过类似的方法）。

谢谢你的回复，但我不认为作用域是问题所在。将公用文件夹中的bundle.js替换为index.js（以及html文件中的脚本

src=

）然后在浏览器中打开index.html文件（而不是使用webpack dev server提供），脚本可以工作。我还没有使用react，我已经相当彻底地梳理了Web包文档…好的，那么如果您从

index.js

文件中记录了一些东西会怎么样？它实际上会将任何东西记录到控制台吗？@Drew2这是范围的问题。检查bundle.js，您会看到整个文件都是新的如果你真的尝试我在回答中的建议，你会发现它是有效的：）对不起，你是对的，我需要用JS闭包来重新熟悉我自己。我会用一个解决方案更新我的问题。谢谢你的回答，我不认为范围是这里的问题。将公用文件夹中的my bundle.js替换为index.js（以及html文件中的脚本

src=

），然后在浏览器中打开index.html文件（而不是使用webpack dev server提供），脚本就可以工作了。我还没有使用react，我已经相当彻底地梳理了Web包文档……好吧，那么如果您从

index.js

文件中选择了

console.log

内容会怎么样？它是否真的将任何内容记录到控制台？@Drew2这是范围的问题。检查bundle.js，您将看到整个文件是新的作用域，无法访问全局文件。如果你真的尝试我在回答中的建议，你会发现它是有效的：）对不起，你是对的，我需要用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!";
};

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