试图了解Webpack [英] Trying to understand Webpack

问题描述

我是HTML/CSS/PHP/MYSQL程序员，现在正尝试学习一些JavaScript.我通过挖掘当前正在使用的Webmail代码(开放源代码)并试图了解其工作原理来做到这一点.我试图了解如何加载页面的不同部分(无需重新加载页面即可在PHP中获得).如果我没有记错的话，那就使用webpack来做到这一点.如果我没记错的话，页面的每个部分都会作为模块加载.

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.

/******/ (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);
/******/ })

这似乎是使魔术成为可能的代码的一部分.现在，稍后在代码中使用如下所示的webpack:

This seems to be (part of) the code that makes that magic possible. Now, later on in the code webpack is used like this:

AbstractSystemDropDownUserView.prototype.settingsClick = function ()
{
    __webpack_require__(/*! Knoin/Knoin */ 5).setHash(Links.settings());
};

如果我是对的，那么该功能将在单击"settingsClick"喜欢的按钮时加载模块.但是，模块号在哪里定义/分配?

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?

非常感谢您为我提供帮助！

Any help with getting me on my way is greatly appreciated!

推荐答案

Webpack从主JS文件开始，其配置的插件(允许需要其他资源)也将这些资源编译为合并脚本.作为当JS或CSS更改时热交换更新的观察者.奇怪的是，如果您查看项目的源代码，它将被设置为许多使用require或ES6样式模块导入/导出指令的CommonJS/Node-Style模块.

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 require or ES6 style module import/export directives.

一些入门的地方:

• WebPack文档->动机
• React/WebPack食谱

• WebPack Docs -> Motivation
• React/WebPack Cookbook

您还应该查看:

• NPM简介-NPM是您可能要使用的大多数模块所在的位置.
• NodeJS -服务器端JS环境，其中大多数工具都是通过node运行的.
• 浏览器-Webpack的浏览器功能还很多，您可能更喜欢直接的方法
• Gulp -Gulp是基于流的构建工具，webpack拥有自己的工具，但是值得寻找其他想法.
• BabelJS -以前是6to5-使您可以在当今的浏览器中使用现代JS功能.
• ES5垫片-如果您需要支持IE8，则需要这些.

• 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.

Webpack依赖于node/iojs中的模块和工具，它也与带有附加功能的browserify相似.

Webpack relies on modules, and tools from node/iojs, it's also similar to browserify with extras.

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