mirror of https://github.com/webpack/webpack.git
340 lines
10 KiB
Markdown
340 lines
10 KiB
Markdown
# example.js
|
|
|
|
```javascript
|
|
// use our loader
|
|
console.dir(require("./loader!./file"));
|
|
|
|
// use built-in css loader
|
|
console.dir(require("./test.css")); // default by extension
|
|
console.dir(require("!css-loader!./test.css")); // manual
|
|
```
|
|
|
|
# file.js
|
|
|
|
```javascript
|
|
exports.foo = "bar";
|
|
```
|
|
|
|
# loader.js
|
|
|
|
```javascript
|
|
module.exports = function(content) {
|
|
return "exports.answer = 42;\n" + content;
|
|
}
|
|
```
|
|
|
|
# test.css
|
|
|
|
```css
|
|
.some-class {
|
|
color: hotpink;
|
|
}
|
|
```
|
|
|
|
# dist/output.js
|
|
|
|
```javascript
|
|
/******/ (() => { // webpackBootstrap
|
|
/******/ var __webpack_modules__ = ([
|
|
/* 0 */,
|
|
/* 1 */
|
|
/*!*****************************!*\
|
|
!*** ./loader.js!./file.js ***!
|
|
\*****************************/
|
|
/*! default exports */
|
|
/*! export answer [provided] [no usage info] [missing usage info prevents renaming] */
|
|
/*! export foo [provided] [no usage info] [missing usage info prevents renaming] */
|
|
/*! other exports [not provided] [no usage info] */
|
|
/*! runtime requirements: __webpack_exports__ */
|
|
/***/ ((__unused_webpack_module, exports) => {
|
|
|
|
exports.answer = 42;
|
|
exports.foo = "bar";
|
|
|
|
/***/ }),
|
|
/* 2 */
|
|
/*!************************************************************!*\
|
|
!*** ../../node_modules/css-loader/dist/cjs.js!./test.css ***!
|
|
\************************************************************/
|
|
/*! namespace exports */
|
|
/*! export default [provided] [no usage info] [missing usage info prevents renaming] */
|
|
/*! other exports [not provided] [no usage info] */
|
|
/*! runtime requirements: __webpack_require__, __webpack_require__.n, __webpack_exports__, __webpack_require__.r, module.id, __webpack_require__.d, __webpack_require__.*, module */
|
|
/***/ ((module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
"use strict";
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
|
|
/* harmony export */ });
|
|
/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ 3);
|
|
/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
|
|
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ 4);
|
|
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
|
|
// Imports
|
|
|
|
|
|
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
|
|
// Module
|
|
___CSS_LOADER_EXPORT___.push([module.id, `.some-class {
|
|
color: hotpink;
|
|
}
|
|
`, ""]);
|
|
// Exports
|
|
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
|
|
|
|
|
|
/***/ }),
|
|
/* 3 */
|
|
/*!******************************************************************!*\
|
|
!*** ../../node_modules/css-loader/dist/runtime/noSourceMaps.js ***!
|
|
\******************************************************************/
|
|
/*! unknown exports (runtime-defined) */
|
|
/*! runtime requirements: module */
|
|
/*! CommonJS bailout: module.exports is used directly at 3:0-14 */
|
|
/***/ ((module) => {
|
|
|
|
"use strict";
|
|
|
|
|
|
module.exports = function (i) {
|
|
return i[1];
|
|
};
|
|
|
|
/***/ }),
|
|
/* 4 */
|
|
/*!*********************************************************!*\
|
|
!*** ../../node_modules/css-loader/dist/runtime/api.js ***!
|
|
\*********************************************************/
|
|
/*! unknown exports (runtime-defined) */
|
|
/*! runtime requirements: module */
|
|
/*! CommonJS bailout: module.exports is used directly at 7:0-14 */
|
|
/***/ ((module) => {
|
|
|
|
"use strict";
|
|
|
|
|
|
/*
|
|
MIT License http://www.opensource.org/licenses/mit-license.php
|
|
Author Tobias Koppers @sokra
|
|
*/
|
|
module.exports = function (cssWithMappingToString) {
|
|
var list = [];
|
|
|
|
// return the list of modules as css string
|
|
list.toString = function toString() {
|
|
return this.map(function (item) {
|
|
var content = "";
|
|
var needLayer = typeof item[5] !== "undefined";
|
|
if (item[4]) {
|
|
content += "@supports (".concat(item[4], ") {");
|
|
}
|
|
if (item[2]) {
|
|
content += "@media ".concat(item[2], " {");
|
|
}
|
|
if (needLayer) {
|
|
content += "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {");
|
|
}
|
|
content += cssWithMappingToString(item);
|
|
if (needLayer) {
|
|
content += "}";
|
|
}
|
|
if (item[2]) {
|
|
content += "}";
|
|
}
|
|
if (item[4]) {
|
|
content += "}";
|
|
}
|
|
return content;
|
|
}).join("");
|
|
};
|
|
|
|
// import a list of modules into the list
|
|
list.i = function i(modules, media, dedupe, supports, layer) {
|
|
if (typeof modules === "string") {
|
|
modules = [[null, modules, undefined]];
|
|
}
|
|
var alreadyImportedModules = {};
|
|
if (dedupe) {
|
|
for (var k = 0; k < this.length; k++) {
|
|
var id = this[k][0];
|
|
if (id != null) {
|
|
alreadyImportedModules[id] = true;
|
|
}
|
|
}
|
|
}
|
|
for (var _k = 0; _k < modules.length; _k++) {
|
|
var item = [].concat(modules[_k]);
|
|
if (dedupe && alreadyImportedModules[item[0]]) {
|
|
continue;
|
|
}
|
|
if (typeof layer !== "undefined") {
|
|
if (typeof item[5] === "undefined") {
|
|
item[5] = layer;
|
|
} else {
|
|
item[1] = "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {").concat(item[1], "}");
|
|
item[5] = layer;
|
|
}
|
|
}
|
|
if (media) {
|
|
if (!item[2]) {
|
|
item[2] = media;
|
|
} else {
|
|
item[1] = "@media ".concat(item[2], " {").concat(item[1], "}");
|
|
item[2] = media;
|
|
}
|
|
}
|
|
if (supports) {
|
|
if (!item[4]) {
|
|
item[4] = "".concat(supports);
|
|
} else {
|
|
item[1] = "@supports (".concat(item[4], ") {").concat(item[1], "}");
|
|
item[4] = supports;
|
|
}
|
|
}
|
|
list.push(item);
|
|
}
|
|
};
|
|
return list;
|
|
};
|
|
|
|
/***/ })
|
|
/******/ ]);
|
|
```
|
|
|
|
<details><summary><code>/* webpack runtime code */</code></summary>
|
|
|
|
``` js
|
|
/************************************************************************/
|
|
/******/ // The module cache
|
|
/******/ var __webpack_module_cache__ = {};
|
|
/******/
|
|
/******/ // The require function
|
|
/******/ function __webpack_require__(moduleId) {
|
|
/******/ // Check if module is in cache
|
|
/******/ var cachedModule = __webpack_module_cache__[moduleId];
|
|
/******/ if (cachedModule !== undefined) {
|
|
/******/ return cachedModule.exports;
|
|
/******/ }
|
|
/******/ // Create a new module (and put it into the cache)
|
|
/******/ var module = __webpack_module_cache__[moduleId] = {
|
|
/******/ id: moduleId,
|
|
/******/ // no module.loaded needed
|
|
/******/ exports: {}
|
|
/******/ };
|
|
/******/
|
|
/******/ // Execute the module function
|
|
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
|
/******/
|
|
/******/ // Return the exports of the module
|
|
/******/ return module.exports;
|
|
/******/ }
|
|
/******/
|
|
/************************************************************************/
|
|
/******/ /* webpack/runtime/compat get default export */
|
|
/******/ (() => {
|
|
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
/******/ __webpack_require__.n = (module) => {
|
|
/******/ var getter = module && module.__esModule ?
|
|
/******/ () => (module['default']) :
|
|
/******/ () => (module);
|
|
/******/ __webpack_require__.d(getter, { a: getter });
|
|
/******/ return getter;
|
|
/******/ };
|
|
/******/ })();
|
|
/******/
|
|
/******/ /* webpack/runtime/define property getters */
|
|
/******/ (() => {
|
|
/******/ // define getter functions for harmony exports
|
|
/******/ __webpack_require__.d = (exports, definition) => {
|
|
/******/ for(var key in definition) {
|
|
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
|
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|
/******/ }
|
|
/******/ }
|
|
/******/ };
|
|
/******/ })();
|
|
/******/
|
|
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
/******/ (() => {
|
|
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
|
/******/ })();
|
|
/******/
|
|
/******/ /* webpack/runtime/make namespace object */
|
|
/******/ (() => {
|
|
/******/ // define __esModule on exports
|
|
/******/ __webpack_require__.r = (exports) => {
|
|
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
/******/ }
|
|
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
/******/ };
|
|
/******/ })();
|
|
/******/
|
|
/************************************************************************/
|
|
```
|
|
|
|
</details>
|
|
|
|
``` js
|
|
var __webpack_exports__ = {};
|
|
// This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk.
|
|
(() => {
|
|
/*!********************!*\
|
|
!*** ./example.js ***!
|
|
\********************/
|
|
/*! unknown exports (runtime-defined) */
|
|
/*! runtime requirements: __webpack_require__ */
|
|
// use our loader
|
|
console.dir(__webpack_require__(/*! ./loader!./file */ 1));
|
|
|
|
// use built-in css loader
|
|
console.dir(__webpack_require__(/*! ./test.css */ 2)); // default by extension
|
|
console.dir(__webpack_require__(/*! !css-loader!./test.css */ 2)); // manual
|
|
|
|
})();
|
|
|
|
/******/ })()
|
|
;
|
|
```
|
|
|
|
# Console output
|
|
|
|
Prints in node.js (`enhanced-require example.js`) and in browser:
|
|
|
|
```
|
|
{ answer: 42, foo: 'bar' }
|
|
{ foobar: 1234 }
|
|
{ foobar: 1234 }
|
|
```
|
|
|
|
# Info
|
|
|
|
## Unoptimized
|
|
|
|
```
|
|
asset output.js 8.95 KiB [emitted] (name: main)
|
|
chunk (runtime: main) output.js (main) 3.01 KiB (javascript) 937 bytes (runtime) [entry] [rendered]
|
|
> ./example.js main
|
|
dependent modules 2.81 KiB [dependent] 4 modules
|
|
runtime modules 937 bytes 4 modules
|
|
./example.js 205 bytes [built] [code generated]
|
|
[used exports unknown]
|
|
entry ./example.js main
|
|
webpack X.X.X compiled successfully
|
|
```
|
|
|
|
## Production mode
|
|
|
|
```
|
|
asset output.js 1.69 KiB [emitted] [minimized] (name: main)
|
|
chunk (runtime: main) output.js (main) 3.01 KiB (javascript) 937 bytes (runtime) [entry] [rendered]
|
|
> ./example.js main
|
|
dependent modules 2.81 KiB [dependent] 4 modules
|
|
runtime modules 937 bytes 4 modules
|
|
./example.js 205 bytes [built] [code generated]
|
|
[no exports used]
|
|
entry ./example.js main
|
|
webpack X.X.X compiled successfully
|
|
```
|