javascript 尝试理解 Webpack
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28776061/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trying to understand Webpack
提问by Sander
I'm an HTML/CSS/PHP/MYSQL programmer, now trying to learn some javascript. I'm doing that by digging trough the code of the webmail I'm currently using (open source) and trying to understand how it works. I'm trying to understand how the different parts of the page are getting loaded (without the page reload you would get in PHP). If I'm not wrong it's using webpack to do that. Every part of the page is loaded as a module if I'm not wrong.
我是一名 HTML/CSS/PHP/MYSQL 程序员，现在正在尝试学习一些 javascript。我通过挖掘我目前使用的网络邮件的代码（开源）并试图了解它是如何工作的来做到这一点的。我试图了解页面的不同部分是如何加载的（如果没有页面重新加载，您将在 PHP 中获得）。如果我没猜错，那就是使用 webpack 来做到这一点。如果我没记错的话，页面的每一部分都作为一个模块加载。
/******/ (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] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = 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;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "webmail/v/0.0.0/static/js/";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
This seems to be (part of) the code that makes that magic possible. Now, later on in the code webpack is used like this:
这似乎是使这种魔法成为可能的（部分）代码。现在，稍后在代码中 webpack 是这样使用的：
AbstractSystemDropDownUserView.prototype.settingsClick = function ()
{
__webpack_require__(/*! Knoin/Knoin */ 5).setHash(Links.settings());
};
If I'm correct, this function loads a module when clicking on the button liked to settingsClick. However, where are the module numbers defined/assigned?
如果我是对的，这个函数会在点击喜欢 settingsClick 的按钮时加载一个模块。但是，模块编号在哪里定义/分配？
Any help with getting me on my way is greatly appreciated!
非常感谢任何让我上路的帮助！
回答by Tracker1
Webpack starts with a primary JS file, and its configured addons (allow for additional resources to be required in), compiles these resources into a merged script, as well as watchers for hot-swap updates when JS or CSS changes. Odds are, if you look at the source code for the project, it will be setup as a number of CommonJS/Node-Style modules that use requireor ES6 style module import/export directives.
Webpack 从一个主要的 JS 文件开始，它的配置插件（允许需要额外的资源），将这些资源编译成一个合并的脚本，以及当 JS 或 CSS 更改时热插拔更新的观察者。很可能，如果您查看项目的源代码，它将被设置为许多使用require或 ES6 样式模块导入/导出指令的 CommonJS/Node-Style 模块。
Some places to get started:
一些开始的地方：
You should also look at:
你还应该看看：
- Introduction to NPM- NPM is where most modules that you will likely want to use reside.
- NodeJS- Server-Side JS environment, most of these tools run via node.
- Browserify- Webpack is pretty much browserify + more, You may prefer a more direct approach
- Gulp- Gulp is a stream based build tool, webpack has its' own, but it's worth looking at for additional ideas.
- BabelJS- formerly 6to5 - lets you use modern JS features in browsers today.
- ES5 Shims- if you need to support IE8, you'll need these.
- NPM 简介- NPM 是您可能想要使用的大多数模块所在的位置。
- NodeJS- 服务器端 JS 环境，这些工具大部分通过node.js运行。
- Browserify- Webpack 几乎是 browserify + 更多，您可能更喜欢更直接的方法
- Gulp- Gulp 是一个基于流的构建工具，webpack 有它自己的工具，但值得一看以获取其他想法。
- BabelJS- 以前的 6to5 - 让你在今天的浏览器中使用现代 JS 功能。
- ES5 Shims- 如果您需要支持 IE8，您将需要这些。
Webpack relies on modules, and tools from node/iojs, it's also similar to browserify with extras.
Webpack 依赖于 node/iojs 中的模块和工具，它也类似于带有附加功能的 browserify。
