正在尝试理解Webpack
Trying to understand Webpack
本文关键字:Webpack 更新时间:2024-06-23
我是一名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);
/******/ })
这似乎是使这种魔力成为可能的代码的一部分。现在,在稍后的代码中,webpack是这样使用的:
AbstractSystemDropDownUserView.prototype.settingsClick = function ()
{
__webpack_require__(/*! Knoin/Knoin */ 5).setHash(Links.settings());
};
如果我是正确的,这个函数会在点击喜欢设置的按钮时加载一个模块。点击。但是,模块编号在哪里定义/分配?
非常感谢任何帮助我上路的人!
Webpack从一个主JS文件及其配置的插件(允许中需要额外的资源)开始,将这些资源编译成一个合并的脚本,并在JS或CSS更改时监视热交换更新。如果您查看项目的源代码,很可能会将其设置为使用require
或ES6样式模块导入/导出指令的多个CommonJS/Node样式模块。
一些地方开始:
- WebPack文档->动机
- React/WebPack食谱
你还应该看看:
- NPM简介-NPM是您可能想要使用的大多数模块所在的位置
- NodeJS-服务器端JS环境,这些工具大多通过节点运行
- Browserify-Webpack是相当浏览+更多,你可能更喜欢一个更直接的方法
- Gulp-Gulp是一个基于流的构建工具,webpack有自己的,但它值得一看,以获得更多的想法
- BabelJS——以前的6to5——让你在今天的浏览器中使用现代JS功能
- ES5垫片-如果你需要支持IE8,你需要这些
Webpack依赖于node/iojs中的模块和工具,它也类似于带有额外功能的browserfy。
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- Webpack/Rect:遵循egghead.io教程,但出现错误:您可能需要一个合适的加载程序来处理此文件类型
- Webpack开发服务器和React服务器端渲染
- 让Webpack管理Quirky AMD定义的最佳方式
- 什么'在webpack外部设置中,reactDom和reactDom不同
- webpack代码拆分了handlerbs文件——结果是文件很大
- 将webpack和babel与父项目目录中的文件一起使用
- React, Webpack: bundle.js is not generated
- Webpack UglifyJS仍在发出警告消息
- 将require('..')与变量一起使用与在webpack中使用字符串相比
- webpack开发模式和生产构建模式之间有什么区别
- index.html使用webpack开发服务器未重新加载
- 如何在Webpack中从导出中排除供应商模块peerDependencies
- 如何在使用webpack时不解决需求
- 通过Webpack导入模块中的图像
- 使用提取文本webpack插件时出现意外字符
- 如何在不使用require语句的情况下使用webpack加载目录中的所有文件
- 如何使用webpack将全局JS文件包含到我的React项目中
- Webpack-无法使用$.getScript加载bundle.js
- 有没有办法在Node/Webpack中预先准备外部JS工具