已更新至webpackLoader的使用
This commit is contained in:
3056762376@qq.com
parent
5a5ce06738
commit
b1ee58ff5e
|
|
@ -73,7 +73,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
|
|||
|
||||
console.log(__WEBPACK_IMPORTED_MODULE_0__js_mathTools_js__["a" /* add */](33,44));
|
||||
console.log(__WEBPACK_IMPORTED_MODULE_0__js_mathTools_js__["b" /* remove */](323,111));
|
||||
__webpack_require__(2)
|
||||
__webpack_require__(2);
|
||||
|
||||
/***/ }),
|
||||
/* 1 */
|
||||
|
|
@ -94,17 +94,40 @@ function remove(num1,num2){
|
|||
/* 2 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
var content = __webpack_require__(3);
|
||||
content = content.__esModule ? content.default : content;
|
||||
|
||||
if (typeof content === 'string') {
|
||||
content = [[module.i, content, '']];
|
||||
}
|
||||
|
||||
var options = {}
|
||||
|
||||
options.insert = "head";
|
||||
options.singleton = false;
|
||||
|
||||
var update = __webpack_require__(5)(content, options);
|
||||
|
||||
if (content.locals) {
|
||||
module.exports = content.locals;
|
||||
}
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 3 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
// Imports
|
||||
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(3);
|
||||
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(4);
|
||||
exports = ___CSS_LOADER_API_IMPORT___(false);
|
||||
// Module
|
||||
exports.push([module.i, "body{\r\n background-color: antiquewhite;\r\n}\r\n", ""]);
|
||||
exports.push([module.i, "body{\r\n background-color: #f00;\r\n}\r\n", ""]);
|
||||
// Exports
|
||||
module.exports = exports;
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 3 */
|
||||
/* 4 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
|
@ -203,5 +226,293 @@ function toComment(sourceMap) {
|
|||
return "/*# ".concat(data, " */");
|
||||
}
|
||||
|
||||
/***/ }),
|
||||
/* 5 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
var stylesInDom = {};
|
||||
|
||||
var isOldIE = function isOldIE() {
|
||||
var memo;
|
||||
return function memorize() {
|
||||
if (typeof memo === 'undefined') {
|
||||
// Test for IE <= 9 as proposed by Browserhacks
|
||||
// @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
|
||||
// Tests for existence of standard globals is to allow style-loader
|
||||
// to operate correctly into non-standard environments
|
||||
// @see https://github.com/webpack-contrib/style-loader/issues/177
|
||||
memo = Boolean(window && document && document.all && !window.atob);
|
||||
}
|
||||
|
||||
return memo;
|
||||
};
|
||||
}();
|
||||
|
||||
var getTarget = function getTarget() {
|
||||
var memo = {};
|
||||
return function memorize(target) {
|
||||
if (typeof memo[target] === 'undefined') {
|
||||
var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself
|
||||
|
||||
if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {
|
||||
try {
|
||||
// This will throw an exception if access to iframe is blocked
|
||||
// due to cross-origin restrictions
|
||||
styleTarget = styleTarget.contentDocument.head;
|
||||
} catch (e) {
|
||||
// istanbul ignore next
|
||||
styleTarget = null;
|
||||
}
|
||||
}
|
||||
|
||||
memo[target] = styleTarget;
|
||||
}
|
||||
|
||||
return memo[target];
|
||||
};
|
||||
}();
|
||||
|
||||
function listToStyles(list, options) {
|
||||
var styles = [];
|
||||
var newStyles = {};
|
||||
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
var item = list[i];
|
||||
var id = options.base ? item[0] + options.base : item[0];
|
||||
var css = item[1];
|
||||
var media = item[2];
|
||||
var sourceMap = item[3];
|
||||
var part = {
|
||||
css: css,
|
||||
media: media,
|
||||
sourceMap: sourceMap
|
||||
};
|
||||
|
||||
if (!newStyles[id]) {
|
||||
styles.push(newStyles[id] = {
|
||||
id: id,
|
||||
parts: [part]
|
||||
});
|
||||
} else {
|
||||
newStyles[id].parts.push(part);
|
||||
}
|
||||
}
|
||||
|
||||
return styles;
|
||||
}
|
||||
|
||||
function addStylesToDom(styles, options) {
|
||||
for (var i = 0; i < styles.length; i++) {
|
||||
var item = styles[i];
|
||||
var domStyle = stylesInDom[item.id];
|
||||
var j = 0;
|
||||
|
||||
if (domStyle) {
|
||||
domStyle.refs++;
|
||||
|
||||
for (; j < domStyle.parts.length; j++) {
|
||||
domStyle.parts[j](item.parts[j]);
|
||||
}
|
||||
|
||||
for (; j < item.parts.length; j++) {
|
||||
domStyle.parts.push(addStyle(item.parts[j], options));
|
||||
}
|
||||
} else {
|
||||
var parts = [];
|
||||
|
||||
for (; j < item.parts.length; j++) {
|
||||
parts.push(addStyle(item.parts[j], options));
|
||||
}
|
||||
|
||||
stylesInDom[item.id] = {
|
||||
id: item.id,
|
||||
refs: 1,
|
||||
parts: parts
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function insertStyleElement(options) {
|
||||
var style = document.createElement('style');
|
||||
|
||||
if (typeof options.attributes.nonce === 'undefined') {
|
||||
var nonce = true ? __webpack_require__.nc : null;
|
||||
|
||||
if (nonce) {
|
||||
options.attributes.nonce = nonce;
|
||||
}
|
||||
}
|
||||
|
||||
Object.keys(options.attributes).forEach(function (key) {
|
||||
style.setAttribute(key, options.attributes[key]);
|
||||
});
|
||||
|
||||
if (typeof options.insert === 'function') {
|
||||
options.insert(style);
|
||||
} else {
|
||||
var target = getTarget(options.insert || 'head');
|
||||
|
||||
if (!target) {
|
||||
throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");
|
||||
}
|
||||
|
||||
target.appendChild(style);
|
||||
}
|
||||
|
||||
return style;
|
||||
}
|
||||
|
||||
function removeStyleElement(style) {
|
||||
// istanbul ignore if
|
||||
if (style.parentNode === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
style.parentNode.removeChild(style);
|
||||
}
|
||||
/* istanbul ignore next */
|
||||
|
||||
|
||||
var replaceText = function replaceText() {
|
||||
var textStore = [];
|
||||
return function replace(index, replacement) {
|
||||
textStore[index] = replacement;
|
||||
return textStore.filter(Boolean).join('\n');
|
||||
};
|
||||
}();
|
||||
|
||||
function applyToSingletonTag(style, index, remove, obj) {
|
||||
var css = remove ? '' : obj.css; // For old IE
|
||||
|
||||
/* istanbul ignore if */
|
||||
|
||||
if (style.styleSheet) {
|
||||
style.styleSheet.cssText = replaceText(index, css);
|
||||
} else {
|
||||
var cssNode = document.createTextNode(css);
|
||||
var childNodes = style.childNodes;
|
||||
|
||||
if (childNodes[index]) {
|
||||
style.removeChild(childNodes[index]);
|
||||
}
|
||||
|
||||
if (childNodes.length) {
|
||||
style.insertBefore(cssNode, childNodes[index]);
|
||||
} else {
|
||||
style.appendChild(cssNode);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function applyToTag(style, options, obj) {
|
||||
var css = obj.css;
|
||||
var media = obj.media;
|
||||
var sourceMap = obj.sourceMap;
|
||||
|
||||
if (media) {
|
||||
style.setAttribute('media', media);
|
||||
}
|
||||
|
||||
if (sourceMap && btoa) {
|
||||
css += "\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), " */");
|
||||
} // For old IE
|
||||
|
||||
/* istanbul ignore if */
|
||||
|
||||
|
||||
if (style.styleSheet) {
|
||||
style.styleSheet.cssText = css;
|
||||
} else {
|
||||
while (style.firstChild) {
|
||||
style.removeChild(style.firstChild);
|
||||
}
|
||||
|
||||
style.appendChild(document.createTextNode(css));
|
||||
}
|
||||
}
|
||||
|
||||
var singleton = null;
|
||||
var singletonCounter = 0;
|
||||
|
||||
function addStyle(obj, options) {
|
||||
var style;
|
||||
var update;
|
||||
var remove;
|
||||
|
||||
if (options.singleton) {
|
||||
var styleIndex = singletonCounter++;
|
||||
style = singleton || (singleton = insertStyleElement(options));
|
||||
update = applyToSingletonTag.bind(null, style, styleIndex, false);
|
||||
remove = applyToSingletonTag.bind(null, style, styleIndex, true);
|
||||
} else {
|
||||
style = insertStyleElement(options);
|
||||
update = applyToTag.bind(null, style, options);
|
||||
|
||||
remove = function remove() {
|
||||
removeStyleElement(style);
|
||||
};
|
||||
}
|
||||
|
||||
update(obj);
|
||||
return function updateStyle(newObj) {
|
||||
if (newObj) {
|
||||
if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) {
|
||||
return;
|
||||
}
|
||||
|
||||
update(obj = newObj);
|
||||
} else {
|
||||
remove();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = function (list, options) {
|
||||
options = options || {};
|
||||
options.attributes = typeof options.attributes === 'object' ? options.attributes : {}; // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
|
||||
// tags it will allow on a page
|
||||
|
||||
if (!options.singleton && typeof options.singleton !== 'boolean') {
|
||||
options.singleton = isOldIE();
|
||||
}
|
||||
|
||||
var styles = listToStyles(list, options);
|
||||
addStylesToDom(styles, options);
|
||||
return function update(newList) {
|
||||
var mayRemove = [];
|
||||
|
||||
for (var i = 0; i < styles.length; i++) {
|
||||
var item = styles[i];
|
||||
var domStyle = stylesInDom[item.id];
|
||||
|
||||
if (domStyle) {
|
||||
domStyle.refs--;
|
||||
mayRemove.push(domStyle);
|
||||
}
|
||||
}
|
||||
|
||||
if (newList) {
|
||||
var newStyles = listToStyles(newList, options);
|
||||
addStylesToDom(newStyles, options);
|
||||
}
|
||||
|
||||
for (var _i = 0; _i < mayRemove.length; _i++) {
|
||||
var _domStyle = mayRemove[_i];
|
||||
|
||||
if (_domStyle.refs === 0) {
|
||||
for (var j = 0; j < _domStyle.parts.length; j++) {
|
||||
_domStyle.parts[j]();
|
||||
}
|
||||
|
||||
delete stylesInDom[_domStyle.id];
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
|
|
@ -3218,6 +3218,22 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/style-loader": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/style-loader/-/style-loader-1.0.2.tgz",
|
||||
"integrity": "sha512-xehHGWeCPrr+R/bU82To0j7L7ENzH30RHYmMhmAumbuIpQ/bHmv3SAj1aTRfBSszkXoqNtpKnJyWXEDydS+KeA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"loader-utils": "^1.2.3",
|
||||
"schema-utils": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.9.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"webpack": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/supports-color": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-4.5.0.tgz",
|
||||
|
|
|
|||
287
11-前端模块化开发/04-webpack_Loader使用/node_modules/style-loader/CHANGELOG.md
generated
vendored
Normal file
287
11-前端模块化开发/04-webpack_Loader使用/node_modules/style-loader/CHANGELOG.md
generated
vendored
Normal file
|
|
@ -0,0 +1,287 @@
|
|||
# Changelog
|
||||
|
||||
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
||||
|
||||
### [1.0.2](https://github.com/webpack-contrib/style-loader/compare/v1.0.1...v1.0.2) (2019-12-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* support ES module syntax ([#435](https://github.com/webpack-contrib/style-loader/issues/435)) ([dcbfadb](https://github.com/webpack-contrib/style-loader/commit/dcbfadb4245e7f0ce888aafc138cbac27d053915))
|
||||
|
||||
### [1.0.1](https://github.com/webpack-contrib/style-loader/compare/v1.0.0...v1.0.1) (2019-11-28)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* compatibility `linkTag` with ES module syntax ([#429](https://github.com/webpack-contrib/style-loader/issues/429)) ([2cdb9c3](https://github.com/webpack-contrib/style-loader/commit/2cdb9c3f51edebec69e8b22ff43b520a5e1c679b))
|
||||
|
||||
## [1.0.0](https://github.com/webpack-contrib/style-loader/compare/v0.23.1...v1.0.0) (2019-08-06)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* es3 compatibility ([#390](https://github.com/webpack-contrib/style-loader/issues/390)) ([ae24ec2](https://github.com/webpack-contrib/style-loader/commit/ae24ec2))
|
||||
* restore original hot reloading behaviour for locals ([#419](https://github.com/webpack-contrib/style-loader/issues/419)) ([f026429](https://github.com/webpack-contrib/style-loader/commit/f026429))
|
||||
* better handle source maps ([#383](https://github.com/webpack-contrib/style-loader/issues/383)) ([84ec8e5](https://github.com/webpack-contrib/style-loader/commit/84ec8e5))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* new `injectType` option ([e2664e9](https://github.com/webpack-contrib/style-loader/commit/e2664e9))
|
||||
* remove type `text/css` from style and link element ([#399](https://github.com/webpack-contrib/style-loader/issues/399)) ([b0187d6](https://github.com/webpack-contrib/style-loader/commit/b0187d6))
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* minimum required Node.js version is `8.9.0`
|
||||
* minimum required `wepback` version is `4.0.0`
|
||||
* the `convertToAbsoluteUrls` option was removed, you don't need this anymore
|
||||
* the `attrs` option was renamed to the `attributes` option
|
||||
* the `transform` option was removed without replacement
|
||||
* the `hmr` option was removed, `webpack` automatically inject HMR code when it is required (when the `HotModuleReplacementPlugin` plugin was used)
|
||||
* the `sourceMap` option was removed. The loader automatically inject source maps if the previous loader emit them
|
||||
* the `ref`/`unref` api methods were removed for `useable` loader, please use the `use`/`unuse` api methods
|
||||
* the `style-loader/url` loader was removed in favor `injectType` option (look the documentation about the `injectType` option)
|
||||
* the `style-loader/useable` loader was removed in favor `injectType` option (look the documentation about the `injectType` option)
|
||||
* the `singleton` option was removed (look documentation about the `injectType` option)
|
||||
* the `insertAt` option was removed in favor the `insert` option (look the documentation about the `insert` option and examples)
|
||||
* the `insertInto` options was removed in favor the `insert` option (look the documentation about the `insert` option and examples)
|
||||
|
||||
|
||||
<a name="0.23.1"></a>
|
||||
## [0.23.1](https://github.com/webpack-contrib/style-loader/compare/v0.23.0...v0.23.1) (2018-10-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **addStyles:** support exports of transpiled transforms (`options.transform`) ([#333](https://github.com/webpack-contrib/style-loader/issues/333)) ([33aebed](https://github.com/webpack-contrib/style-loader/commit/33aebed))
|
||||
|
||||
|
||||
|
||||
<a name="0.23.0"></a>
|
||||
# [0.23.0](https://github.com/webpack-contrib/style-loader/compare/v0.22.1...v0.23.0) (2018-08-27)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **useable:** add `insertInto` support (`options.insertInto`) ([#341](https://github.com/webpack-contrib/style-loader/issues/341)) ([2588aca](https://github.com/webpack-contrib/style-loader/commit/2588aca))
|
||||
|
||||
|
||||
|
||||
<a name="0.22.1"></a>
|
||||
## [0.22.1](https://github.com/webpack-contrib/style-loader/compare/v0.22.0...v0.22.1) (2018-08-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **addStyles:** use `var` instead of `const` (IE fix) ([#338](https://github.com/webpack-contrib/style-loader/issues/338)) ([1ca12ab](https://github.com/webpack-contrib/style-loader/commit/1ca12ab))
|
||||
|
||||
|
||||
|
||||
<a name="0.22.0"></a>
|
||||
# [0.22.0](https://github.com/webpack-contrib/style-loader/compare/v0.21.0...v0.22.0) (2018-08-07)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* insertInto and insertAt collaboration ([#325](https://github.com/webpack-contrib/style-loader/issues/325)) ([c7d8fec](https://github.com/webpack-contrib/style-loader/commit/c7d8fec))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add support for __webpack_nonce__ ([#319](https://github.com/webpack-contrib/style-loader/issues/319)) ([fc24512](https://github.com/webpack-contrib/style-loader/commit/fc24512))
|
||||
|
||||
|
||||
|
||||
<a name="0.21.0"></a>
|
||||
# [0.21.0](https://github.com/webpack-contrib/style-loader/compare/v0.20.3...v0.21.0) (2018-04-18)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* enable tag type configuration ([#316](https://github.com/webpack-contrib/style-loader/issues/316)) ([892cba5](https://github.com/webpack-contrib/style-loader/commit/892cba5))
|
||||
|
||||
|
||||
|
||||
<a name="0.20.3"></a>
|
||||
## [0.20.3](https://github.com/webpack-contrib/style-loader/compare/v0.20.2...v0.20.3) (2018-03-09)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **package:** update `schema-utils` v0.4.3...0.4.5 (`dependencies`) ([#308](https://github.com/webpack-contrib/style-loader/issues/308)) ([9455888](https://github.com/webpack-contrib/style-loader/commit/9455888))
|
||||
|
||||
|
||||
|
||||
<a name="0.20.2"></a>
|
||||
## [0.20.2](https://github.com/webpack-contrib/style-loader/compare/v0.20.1...v0.20.2) (2018-02-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **urls:** skip empty `url()` handling ([#304](https://github.com/webpack-contrib/style-loader/issues/304)) ([64f12dc](https://github.com/webpack-contrib/style-loader/commit/64f12dc))
|
||||
|
||||
|
||||
|
||||
<a name="0.20.1"></a>
|
||||
## [0.20.1](https://github.com/webpack-contrib/style-loader/compare/v0.20.0...v0.20.1) (2018-01-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **index:** source code indentation ([#299](https://github.com/webpack-contrib/style-loader/issues/299)) ([b4642e7](https://github.com/webpack-contrib/style-loader/commit/b4642e7))
|
||||
|
||||
|
||||
|
||||
<a name="0.20.0"></a>
|
||||
# [0.20.0](https://github.com/webpack-contrib/style-loader/compare/v0.19.1...v0.20.0) (2018-01-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **addStyles:** check if `HTMLIFrameElement` exist ([#296](https://github.com/webpack-contrib/style-loader/issues/296)) ([9b46128](https://github.com/webpack-contrib/style-loader/commit/9b46128))
|
||||
* **index:** enable HMR in case `locals` (`css-modules`) are unchanged ([#298](https://github.com/webpack-contrib/style-loader/issues/298)) ([3a4cb53](https://github.com/webpack-contrib/style-loader/commit/3a4cb53))
|
||||
* **options:** add `transform` option validation (`{String}`) ([23c3567](https://github.com/webpack-contrib/style-loader/commit/23c3567))
|
||||
* **options:** support passing a `{Function}` (`options.insertInto`) ([e0c4b19](https://github.com/webpack-contrib/style-loader/commit/e0c4b19))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* support passing a `{Function}` (`options.insertInto`) ([#279](https://github.com/webpack-contrib/style-loader/issues/279)) ([0eb8fe7](https://github.com/webpack-contrib/style-loader/commit/0eb8fe7))
|
||||
|
||||
|
||||
|
||||
<a name="0.19.1"></a>
|
||||
## [0.19.1](https://github.com/webpack/style-loader/compare/v0.19.0...v0.19.1) (2017-12-14)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **addStyles:** correctly check `singleton` behavior when `{Boolean}` (`options.singleton`) ([#285](https://github.com/webpack/style-loader/issues/285)) ([2bfc93e](https://github.com/webpack/style-loader/commit/2bfc93e))
|
||||
|
||||
|
||||
|
||||
<a name="0.19.0"></a>
|
||||
# [0.19.0](https://github.com/webpack/style-loader/compare/v0.18.2...v0.19.0) (2017-10-03)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add option to enable/disable HMR (`options.hmr`) ([#264](https://github.com/webpack/style-loader/issues/264)) ([378e906](https://github.com/webpack/style-loader/commit/378e906))
|
||||
* add support for iframes (`options.insertInto`) ([#248](https://github.com/webpack/style-loader/issues/248)) ([25e8e89](https://github.com/webpack/style-loader/commit/25e8e89))
|
||||
* support 'before' insertions (`options.insertAt`) ([#253](https://github.com/webpack/style-loader/issues/253)) ([67120f8](https://github.com/webpack/style-loader/commit/67120f8))
|
||||
|
||||
|
||||
|
||||
<a name="0.18.2"></a>
|
||||
## [0.18.2](https://github.com/webpack/style-loader/compare/v0.18.1...v0.18.2) (2017-06-05)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **url:** use `loaderUtils.stringifyRequest` to avoid invalidating hashes due to absolute paths ([#242](https://github.com/webpack/style-loader/issues/242)) ([97508ec](https://github.com/webpack/style-loader/commit/97508ec))
|
||||
* Add `null` check to `removeStyleElement` ([#245](https://github.com/webpack/style-loader/issues/245)) ([0a4845c](https://github.com/webpack/style-loader/commit/0a4845c))
|
||||
|
||||
|
||||
|
||||
<a name="0.18.1"></a>
|
||||
## [0.18.1](https://github.com/webpack/style-loader/compare/v0.18.0...v0.18.1) (2017-05-23)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **addStyles:** revert merged loops ([#236](https://github.com/webpack/style-loader/issues/236)) ([fbd04b1](https://github.com/webpack/style-loader/commit/fbd04b1))
|
||||
|
||||
|
||||
|
||||
<a name="0.18.0"></a>
|
||||
# [0.18.0](https://github.com/webpack/style-loader/compare/v0.17.0...v0.18.0) (2017-05-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* stringify the options.transform request ([#230](https://github.com/webpack/style-loader/issues/230)) ([5888095](https://github.com/webpack/style-loader/commit/5888095))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add options validation ([#224](https://github.com/webpack/style-loader/issues/224)) ([4b6b70d](https://github.com/webpack/style-loader/commit/4b6b70d))
|
||||
|
||||
|
||||
|
||||
<a name="0.17.0"></a>
|
||||
# [0.17.0](https://github.com/webpack/style-loader/compare/v0.16.1...v0.17.0) (2017-05-01)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add option.base ([#164](https://github.com/webpack/style-loader/issues/164)) ([e4ac886](https://github.com/webpack/style-loader/commit/e4ac886))
|
||||
* add option.transform ([#146](https://github.com/webpack/style-loader/issues/146)) ([1c3943f](https://github.com/webpack/style-loader/commit/1c3943f))
|
||||
|
||||
|
||||
|
||||
<a name="0.16.1"></a>
|
||||
## [0.16.1](https://github.com/webpack/style-loader/compare/v0.16.0...v0.16.1) (2017-03-28)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* negative refs ([#122](https://github.com/webpack/style-loader/issues/122)) ([f6f577a](https://github.com/webpack/style-loader/commit/f6f577a))
|
||||
|
||||
|
||||
|
||||
<a name="0.16.0"></a>
|
||||
# [0.16.0](https://github.com/webpack/style-loader/compare/v0.15.0...v0.16.0) (2017-03-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **addStyles:** update for test for old IE versions ([#196](https://github.com/webpack/style-loader/issues/196)) ([1f68495](https://github.com/webpack/style-loader/commit/1f68495))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* Set custom attributes for tag in url mode ([#198](https://github.com/webpack/style-loader/issues/198)) ([2c4f427](https://github.com/webpack/style-loader/commit/2c4f427))
|
||||
|
||||
|
||||
|
||||
<a name="0.15.0"></a>
|
||||
# [0.15.0](https://github.com/webpack/style-loader/compare/v0.14.1...v0.15.0) (2017-03-21)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* match parens recursively on URLs to not fix embeded calls ([#192](https://github.com/webpack/style-loader/issues/192)) ([71e0908](https://github.com/webpack/style-loader/commit/71e0908))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add insertInto option ([#135](https://github.com/webpack/style-loader/issues/135)) ([6636868](https://github.com/webpack/style-loader/commit/6636868))
|
||||
|
||||
|
||||
|
||||
<a name="0.14.1"></a>
|
||||
## [0.14.1](https://github.com/webpack/style-loader/compare/v0.14.0...v0.14.1) (2017-03-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* syntax error in IE10 and below because of `const` keyword ([#190](https://github.com/webpack/style-loader/issues/190)) ([01080cf](https://github.com/webpack/style-loader/commit/01080cf))
|
||||
|
||||
|
||||
|
||||
<a name="0.14.0"></a>
|
||||
# [0.14.0](https://github.com/webpack/style-loader/compare/v0.13.1...v0.14.0) (2017-03-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Adds type attr. to the generated link element ([2a2f261](https://github.com/webpack/style-loader/commit/2a2f261))
|
||||
* **fixUrls:** add param to fix relative urls ([#186](https://github.com/webpack/style-loader/issues/186)) ([19959ee](https://github.com/webpack/style-loader/commit/19959ee))
|
||||
* **usable:** Export locals if available([#128](https://github.com/webpack/style-loader/issues/128)) ([e280cb6](https://github.com/webpack/style-loader/commit/e280cb6))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **tag-attribute:** Add support for custom tag attribute ([995f3de](https://github.com/webpack/style-loader/commit/995f3de))
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
Copyright JS Foundation and other contributors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
'Software'), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
||||
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
||||
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
||||
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
785
11-前端模块化开发/04-webpack_Loader使用/node_modules/style-loader/README.md
generated
vendored
Normal file
785
11-前端模块化开发/04-webpack_Loader使用/node_modules/style-loader/README.md
generated
vendored
Normal file
|
|
@ -0,0 +1,785 @@
|
|||
<div align="center">
|
||||
<a href="https://github.com/webpack/webpack">
|
||||
<img width="200" height="200"
|
||||
src="https://webpack.js.org/assets/icon-square-big.svg">
|
||||
</a>
|
||||
<h1>Style Loader</h1>
|
||||
</div>
|
||||
|
||||
[![npm][npm]][npm-url]
|
||||
[![node][node]][node-url]
|
||||
[![deps][deps]][deps-url]
|
||||
[![tests][tests]][tests-url]
|
||||
[![coverage][cover]][cover-url]
|
||||
[![chat][chat]][chat-url]
|
||||
[![size][size]][size-url]
|
||||
|
||||
# style-loader
|
||||
|
||||
Inject CSS into the DOM.
|
||||
|
||||
## Getting Started
|
||||
|
||||
To begin, you'll need to install `style-loader`:
|
||||
|
||||
```console
|
||||
npm install --save-dev style-loader
|
||||
```
|
||||
|
||||
It's recommended to combine `style-loader` with the [`css-loader`](https://github.com/webpack-contrib/css-loader)
|
||||
|
||||
Then add the loader to your `webpack` config. For example:
|
||||
|
||||
**style.css**
|
||||
|
||||
```css
|
||||
body {
|
||||
background: green;
|
||||
}
|
||||
```
|
||||
|
||||
**component.js**
|
||||
|
||||
```js
|
||||
import './style.css';
|
||||
```
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: ['style-loader', 'css-loader'],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| :--------------: | :------------------: | :--------: | :------------------------------------------------------- |
|
||||
| **`injectType`** | `{String}` | `styleTag` | Allows to setup how styles will be injected into the DOM |
|
||||
| **`attributes`** | `{Object}` | `{}` | Adds custom attributes to tag |
|
||||
| **`insert`** | `{String\|Function}` | `head` | Inserts tag at the given position into the DOM |
|
||||
| **`base`** | `{Number}` | `true` | Sets module ID base (DLLPlugin) |
|
||||
|
||||
### `injectType`
|
||||
|
||||
Type: `String`
|
||||
Default: `styleTag`
|
||||
|
||||
Allows to setup how styles will be injected into the DOM.
|
||||
|
||||
Possible values:
|
||||
|
||||
- `styleTag`
|
||||
- `singletonStyleTag`
|
||||
- `lazyStyleTag`
|
||||
- `lazySingletonStyleTag`
|
||||
- `linkTag`
|
||||
|
||||
#### `styleTag`
|
||||
|
||||
Automatically injects styles into the DOM using multiple `<style></style>`. It is **default** behaviour.
|
||||
|
||||
**component.js**
|
||||
|
||||
```js
|
||||
import './styles.css';
|
||||
```
|
||||
|
||||
Example with c Locals (CSS Modules):
|
||||
|
||||
**component-with-css-modules.js**
|
||||
|
||||
```js
|
||||
import styles from './styles.css';
|
||||
|
||||
const divElement = document.createElement('div');
|
||||
divElement.className = styles['my-class'];
|
||||
```
|
||||
|
||||
All locals (class names) stored in imported object.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [
|
||||
// The `injectType` option can be avoided because it is default behaviour
|
||||
{ loader: 'style-loader', options: { injectType: 'styleTag' } },
|
||||
'css-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
The loader inject styles like:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.foo {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.bar {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
#### `singletonStyleTag`
|
||||
|
||||
Automatically injects styles into the DOM using one `<style></style>`.
|
||||
|
||||
> ⚠ Source maps do not work.
|
||||
|
||||
**component.js**
|
||||
|
||||
```js
|
||||
import './styles.css';
|
||||
```
|
||||
|
||||
**component-with-css-modules.js**
|
||||
|
||||
```js
|
||||
import styles from './styles.css';
|
||||
|
||||
const divElement = document.createElement('div');
|
||||
divElement.className = styles['my-class'];
|
||||
```
|
||||
|
||||
All locals (class names) stored in imported object.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [
|
||||
{
|
||||
loader: 'style-loader',
|
||||
options: { injectType: 'singletonStyleTag' },
|
||||
},
|
||||
'css-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
The loader inject styles like:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.foo {
|
||||
color: red;
|
||||
}
|
||||
.bar {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
#### `lazyStyleTag`
|
||||
|
||||
Injects styles into the DOM using multiple `<style></style>` on demand.
|
||||
We recommend following `.lazy.css` naming convention for lazy styles and the `.css` for basic `style-loader` usage (similar to other file types, i.e. `.lazy.less` and `.less`).
|
||||
When you `lazyStyleTag` value the `style-loader` injects the styles lazily making them useable on-demand via `style.use()` / `style.unuse()`.
|
||||
|
||||
> ⚠️ Behavior is undefined when `unuse` is called more often than `use`. Don't do that.
|
||||
|
||||
**component.js**
|
||||
|
||||
```js
|
||||
import styles from './styles.lazy.css';
|
||||
|
||||
styles.use();
|
||||
// For removing styles you can use
|
||||
// styles.unuse();
|
||||
```
|
||||
|
||||
**component-with-css-modules.js**
|
||||
|
||||
```js
|
||||
import styles from './styles.lazy.css';
|
||||
|
||||
styles.use();
|
||||
|
||||
const divElement = document.createElement('div');
|
||||
divElement.className = styles.locals['my-class'];
|
||||
```
|
||||
|
||||
All locals (class names) stored in `locals` property of imported object.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
exclude: /\.lazy\.css$/i,
|
||||
use: ['style-loader', 'css-loader'],
|
||||
},
|
||||
{
|
||||
test: /\.lazy\.css$/i,
|
||||
use: [
|
||||
{ loader: 'style-loader', options: { injectType: 'lazyStyleTag' } },
|
||||
'css-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
The loader inject styles like:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.foo {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.bar {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
#### `lazySingletonStyleTag`
|
||||
|
||||
Injects styles into the DOM using one `<style></style>` on demand.
|
||||
We recommend following `.lazy.css` naming convention for lazy styles and the `.css` for basic `style-loader` usage (similar to other file types, i.e. `.lazy.less` and `.less`).
|
||||
When you `lazySingletonStyleTag` value the `style-loader` injects the styles lazily making them useable on-demand via `style.use()` / `style.unuse()`.
|
||||
|
||||
> ⚠️ Source maps do not work.
|
||||
|
||||
> ⚠️ Behavior is undefined when `unuse` is called more often than `use`. Don't do that.
|
||||
|
||||
**component.js**
|
||||
|
||||
```js
|
||||
import styles from './styles.css';
|
||||
|
||||
styles.use();
|
||||
// For removing styles you can use
|
||||
// styles.unuse();
|
||||
```
|
||||
|
||||
**component-with-css-modules.js**
|
||||
|
||||
```js
|
||||
import styles from './styles.lazy.css';
|
||||
|
||||
styles.use();
|
||||
|
||||
const divElement = document.createElement('div');
|
||||
divElement.className = styles.locals['my-class'];
|
||||
```
|
||||
|
||||
All locals (class names) stored in `locals` property of imported object.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
exclude: /\.lazy\.css$/i,
|
||||
use: ['style-loader', 'css-loader'],
|
||||
},
|
||||
{
|
||||
test: /\.lazy\.css$/i,
|
||||
use: [
|
||||
{ loader: 'style-loader', options: { injectType: 'lazyStyleTag' } },
|
||||
'css-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
The loader generate this:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.foo {
|
||||
color: red;
|
||||
}
|
||||
.bar {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
#### `linkTag`
|
||||
|
||||
Injects styles into the DOM using multiple `<link rel="stylesheet" href="path/to/file.css">` .
|
||||
|
||||
> ℹ️ The loader will dynamically insert the `<link href="path/to/file.css" rel="stylesheet">` tag at runtime via JavaScript. You should use [MiniCssExtractPlugin](https://webpack.js.org/plugins/mini-css-extract-plugin/) if you want to include a static `<link href="path/to/file.css" rel="stylesheet">`.
|
||||
|
||||
```js
|
||||
import './styles.css';
|
||||
import './other-styles.css';
|
||||
```
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.link\.css$/i,
|
||||
use: [
|
||||
{ loader: 'style-loader', options: { injectType: 'linkTag' } },
|
||||
{ loader: 'file-loader' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
The loader generate this:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="path/to/style.css" />
|
||||
<link rel="stylesheet" href="path/to/other-styles.css" />
|
||||
```
|
||||
|
||||
### `attributes`
|
||||
|
||||
Type: `Object`
|
||||
Default: `{}`
|
||||
|
||||
If defined, the `style-loader` will attach given attributes with their values on `<style>` / `<link>` element.
|
||||
|
||||
**component.js**
|
||||
|
||||
```js
|
||||
import style from './file.css';
|
||||
```
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [
|
||||
{ loader: 'style-loader', options: { attributes: { id: 'id' } } },
|
||||
{ loader: 'css-loader' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
```html
|
||||
<style id="id"></style>
|
||||
```
|
||||
|
||||
### `insert`
|
||||
|
||||
Type: `String|Function`
|
||||
Default: `head`
|
||||
|
||||
By default, the `style-loader` appends `<style>`/`<link>` elements to the end of the style target, which is the `<head>` tag of the page unless specified by `insert`.
|
||||
This will cause CSS created by the loader to take priority over CSS already present in the target.
|
||||
You can use other values if the standard behavior is not suitable for you, but we do not recommend doing this.
|
||||
If you target an [iframe](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement) make sure you have sufficient access rights, the styles will be injected into the content document head.
|
||||
|
||||
#### `String`
|
||||
|
||||
Allows to setup custom [query selector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) where styles inject into the DOM.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [
|
||||
{
|
||||
loader: 'style-loader',
|
||||
options: {
|
||||
insert: 'body',
|
||||
},
|
||||
},
|
||||
'css-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
A new `<style>`/`<link>` elements will be inserted into at bottom of `body` tag.
|
||||
|
||||
#### `Function`
|
||||
|
||||
Allows to override default behavior and insert styles at any position.
|
||||
|
||||
> ⚠ Do not forget that this code will be used in the browser and not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc, we recommend use only ECMA 5 features, but it is depends what browsers you want to support
|
||||
> ⚠ Do not forget that some DOM methods may not be available in older browsers, we recommended use only [DOM core level 2 properties](https://caniuse.com/#search=DOM%20Core), but it is depends what browsers you want to support
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [
|
||||
{
|
||||
loader: 'style-loader',
|
||||
options: {
|
||||
insert: function insertAtTop(element) {
|
||||
var parent = document.querySelector('head');
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
var lastInsertedElement =
|
||||
window._lastElementInsertedByStyleLoader;
|
||||
|
||||
if (!lastInsertedElement) {
|
||||
parent.insertBefore(element, parent.firstChild);
|
||||
} else if (lastInsertedElement.nextSibling) {
|
||||
parent.insertBefore(element, lastInsertedElement.nextSibling);
|
||||
} else {
|
||||
parent.appendChild(element);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
window._lastElementInsertedByStyleLoader = element;
|
||||
},
|
||||
},
|
||||
},
|
||||
'css-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Insert styles at top of `head` tag.
|
||||
|
||||
### `base`
|
||||
|
||||
This setting is primarily used as a workaround for [css clashes](https://github.com/webpack-contrib/style-loader/issues/163) when using one or more [DllPlugin](https://robertknight.github.io/posts/webpack-dll-plugins/)'s. `base` allows you to prevent either the _app_'s css (or _DllPlugin2_'s css) from overwriting _DllPlugin1_'s css by specifying a css module id base which is greater than the range used by _DllPlugin1_ e.g.:
|
||||
|
||||
**webpack.dll1.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: ['style-loader', 'css-loader'],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
**webpack.dll2.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [
|
||||
{ loader: 'style-loader', options: { base: 1000 } },
|
||||
'css-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
**webpack.app.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [
|
||||
{ loader: 'style-loader', options: { base: 2000 } },
|
||||
'css-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Source maps
|
||||
|
||||
The loader automatically inject source maps when previous loader emit them.
|
||||
Therefore, to generate source maps, set the `sourceMap` option to `true` for the previous loader.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [
|
||||
'style-loader',
|
||||
{ loader: 'css-loader', options: { sourceMap: true } },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Nonce
|
||||
|
||||
There are two ways to work with `nonce`:
|
||||
|
||||
- using the `attributes` option
|
||||
- using the `__webpack_nonce__` variable
|
||||
|
||||
> ⚠ the `attributes` option takes precedence over the `__webpack_nonce__` variable
|
||||
|
||||
#### `attributes`
|
||||
|
||||
**component.js**
|
||||
|
||||
```js
|
||||
import './style.css';
|
||||
```
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [
|
||||
{
|
||||
loader: 'style-loader',
|
||||
options: {
|
||||
attributes: {
|
||||
nonce: '12345678',
|
||||
},
|
||||
},
|
||||
},
|
||||
'css-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
The loader generate:
|
||||
|
||||
```html
|
||||
<style nonce="12345678">
|
||||
.foo {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
#### `__webpack_nonce__`
|
||||
|
||||
**create-nonce.js**
|
||||
|
||||
```js
|
||||
__webpack_nonce__ = '12345678';
|
||||
```
|
||||
|
||||
**component.js**
|
||||
|
||||
```js
|
||||
import './create-nonce.js';
|
||||
import './style.css';
|
||||
```
|
||||
|
||||
Alternative example for `require`:
|
||||
|
||||
**component.js**
|
||||
|
||||
```js
|
||||
__webpack_nonce__ = '12345678';
|
||||
|
||||
require('./style.css');
|
||||
```
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: ['style-loader', 'css-loader'],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
The loader generate:
|
||||
|
||||
```html
|
||||
<style nonce="12345678">
|
||||
.foo {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
#### Insert styles at top
|
||||
|
||||
Inserts styles at top of `head` tag.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [
|
||||
{
|
||||
loader: 'style-loader',
|
||||
options: {
|
||||
insert: function insertAtTop(element) {
|
||||
var parent = document.querySelector('head');
|
||||
var lastInsertedElement =
|
||||
window._lastElementInsertedByStyleLoader;
|
||||
|
||||
if (!lastInsertedElement) {
|
||||
parent.insertBefore(element, parent.firstChild);
|
||||
} else if (lastInsertedElement.nextSibling) {
|
||||
parent.insertBefore(element, lastInsertedElement.nextSibling);
|
||||
} else {
|
||||
parent.appendChild(element);
|
||||
}
|
||||
|
||||
window._lastElementInsertedByStyleLoader = element;
|
||||
},
|
||||
},
|
||||
},
|
||||
'css-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### Insert styles before target element
|
||||
|
||||
Inserts styles before `#id` element.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [
|
||||
{
|
||||
loader: 'style-loader',
|
||||
options: {
|
||||
insert: function insertBeforeAt(element) {
|
||||
const parent = document.querySelector('head');
|
||||
const target = document.querySelector('#id');
|
||||
|
||||
const lastInsertedElement =
|
||||
window._lastElementInsertedByStyleLoader;
|
||||
|
||||
if (!lastInsertedElement) {
|
||||
parent.insertBefore(element, target);
|
||||
} else if (lastInsertedElement.nextSibling) {
|
||||
parent.insertBefore(element, lastInsertedElement.nextSibling);
|
||||
} else {
|
||||
parent.appendChild(element);
|
||||
}
|
||||
|
||||
window._lastElementInsertedByStyleLoader = element;
|
||||
},
|
||||
},
|
||||
},
|
||||
'css-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Contributing
|
||||
|
||||
Please take a moment to read our contributing guidelines if you haven't yet done so.
|
||||
|
||||
[CONTRIBUTING](./.github/CONTRIBUTING.md)
|
||||
|
||||
## License
|
||||
|
||||
[MIT](./LICENSE)
|
||||
|
||||
[npm]: https://img.shields.io/npm/v/style-loader.svg
|
||||
[npm-url]: https://npmjs.com/package/style-loader
|
||||
[node]: https://img.shields.io/node/v/style-loader.svg
|
||||
[node-url]: https://nodejs.org
|
||||
[deps]: https://david-dm.org/webpack-contrib/style-loader.svg
|
||||
[deps-url]: https://david-dm.org/webpack-contrib/style-loader
|
||||
[tests]: https://dev.azure.com/webpack-contrib/style-loader/_apis/build/status/webpack-contrib.style-loader?branchName=master
|
||||
[tests-url]: https://dev.azure.com/webpack-contrib/style-loader/_build/latest?definitionId=18&branchName=master
|
||||
[cover]: https://codecov.io/gh/webpack-contrib/style-loader/branch/master/graph/badge.svg
|
||||
[cover-url]: https://codecov.io/gh/webpack-contrib/style-loader
|
||||
[chat]: https://badges.gitter.im/webpack/webpack.svg
|
||||
[chat-url]: https://gitter.im/webpack/webpack
|
||||
[size]: https://packagephobia.now.sh/badge?p=style-loader
|
||||
[size-url]: https://packagephobia.now.sh/result?p=style-loader
|
||||
165
11-前端模块化开发/04-webpack_Loader使用/node_modules/style-loader/dist/index.js
generated
vendored
Normal file
165
11-前端模块化开发/04-webpack_Loader使用/node_modules/style-loader/dist/index.js
generated
vendored
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
"use strict";
|
||||
|
||||
var _path = _interopRequireDefault(require("path"));
|
||||
|
||||
var _loaderUtils = _interopRequireDefault(require("loader-utils"));
|
||||
|
||||
var _schemaUtils = _interopRequireDefault(require("schema-utils"));
|
||||
|
||||
var _options = _interopRequireDefault(require("./options.json"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
module.exports = () => {};
|
||||
|
||||
module.exports.pitch = function loader(request) {
|
||||
const options = _loaderUtils.default.getOptions(this) || {};
|
||||
(0, _schemaUtils.default)(_options.default, options, {
|
||||
name: 'Style Loader',
|
||||
baseDataPath: 'options'
|
||||
});
|
||||
const insert = typeof options.insert === 'undefined' ? '"head"' : typeof options.insert === 'string' ? JSON.stringify(options.insert) : options.insert.toString();
|
||||
const injectType = options.injectType || 'styleTag';
|
||||
|
||||
switch (injectType) {
|
||||
case 'linkTag':
|
||||
{
|
||||
const hmrCode = this.hot ? `
|
||||
if (module.hot) {
|
||||
module.hot.accept(
|
||||
${_loaderUtils.default.stringifyRequest(this, `!!${request}`)},
|
||||
function() {
|
||||
var newContent = require(${_loaderUtils.default.stringifyRequest(this, `!!${request}`)});
|
||||
newContent = newContent.__esModule ? newContent.default : newContent;
|
||||
|
||||
update(newContent);
|
||||
}
|
||||
);
|
||||
|
||||
module.hot.dispose(function() {
|
||||
update();
|
||||
});
|
||||
}` : '';
|
||||
return `var options = ${JSON.stringify(options)};
|
||||
|
||||
options.insert = ${insert};
|
||||
|
||||
var content = require(${_loaderUtils.default.stringifyRequest(this, `!!${request}`)});
|
||||
content = content.__esModule ? content.default : content;
|
||||
|
||||
var update = require(${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoLinkTag.js')}`)})(content, options);
|
||||
${hmrCode}`;
|
||||
}
|
||||
|
||||
case 'lazyStyleTag':
|
||||
case 'lazySingletonStyleTag':
|
||||
{
|
||||
const isSingleton = injectType === 'lazySingletonStyleTag';
|
||||
const hmrCode = this.hot ? `
|
||||
if (module.hot) {
|
||||
var lastRefs = module.hot.data && module.hot.data.refs || 0;
|
||||
|
||||
if (lastRefs) {
|
||||
exports.use();
|
||||
|
||||
if (!content.locals) {
|
||||
refs = lastRefs;
|
||||
}
|
||||
}
|
||||
|
||||
if (!content.locals) {
|
||||
module.hot.accept();
|
||||
}
|
||||
|
||||
module.hot.dispose(function(data) {
|
||||
data.refs = content.locals ? 0 : refs;
|
||||
|
||||
if (dispose) {
|
||||
dispose();
|
||||
}
|
||||
});
|
||||
}` : '';
|
||||
return `var refs = 0;
|
||||
var dispose;
|
||||
var content = require(${_loaderUtils.default.stringifyRequest(this, `!!${request}`)});
|
||||
content = content.__esModule ? content.default : content;
|
||||
|
||||
var options = ${JSON.stringify(options)};
|
||||
|
||||
options.insert = ${insert};
|
||||
options.singleton = ${isSingleton};
|
||||
|
||||
if (typeof content === 'string') {
|
||||
content = [[module.id, content, '']];
|
||||
}
|
||||
|
||||
if (content.locals) {
|
||||
exports.locals = content.locals;
|
||||
}
|
||||
|
||||
exports.use = function() {
|
||||
if (!(refs++)) {
|
||||
dispose = require(${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`)})(content, options);
|
||||
}
|
||||
|
||||
return exports;
|
||||
};
|
||||
|
||||
exports.unuse = function() {
|
||||
if (refs > 0 && !--refs) {
|
||||
dispose();
|
||||
dispose = null;
|
||||
}
|
||||
};
|
||||
${hmrCode}
|
||||
`;
|
||||
}
|
||||
|
||||
case 'styleTag':
|
||||
case 'singletonStyleTag':
|
||||
default:
|
||||
{
|
||||
const isSingleton = injectType === 'singletonStyleTag';
|
||||
const hmrCode = this.hot ? `
|
||||
if (module.hot) {
|
||||
if (!content.locals) {
|
||||
module.hot.accept(
|
||||
${_loaderUtils.default.stringifyRequest(this, `!!${request}`)},
|
||||
function () {
|
||||
var newContent = require(${_loaderUtils.default.stringifyRequest(this, `!!${request}`)});
|
||||
newContent = newContent.__esModule ? newContent.default : newContent;
|
||||
|
||||
if (typeof newContent === 'string') {
|
||||
newContent = [[module.id, newContent, '']];
|
||||
}
|
||||
|
||||
update(newContent);
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
module.hot.dispose(function() {
|
||||
update();
|
||||
});
|
||||
}` : '';
|
||||
return `var content = require(${_loaderUtils.default.stringifyRequest(this, `!!${request}`)});
|
||||
content = content.__esModule ? content.default : content;
|
||||
|
||||
if (typeof content === 'string') {
|
||||
content = [[module.id, content, '']];
|
||||
}
|
||||
|
||||
var options = ${JSON.stringify(options)}
|
||||
|
||||
options.insert = ${insert};
|
||||
options.singleton = ${isSingleton};
|
||||
|
||||
var update = require(${_loaderUtils.default.stringifyRequest(this, `!${_path.default.join(__dirname, 'runtime/injectStylesIntoStyleTag.js')}`)})(content, options);
|
||||
|
||||
if (content.locals) {
|
||||
module.exports = content.locals;
|
||||
}
|
||||
${hmrCode}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
35
11-前端模块化开发/04-webpack_Loader使用/node_modules/style-loader/dist/options.json
generated
vendored
Normal file
35
11-前端模块化开发/04-webpack_Loader使用/node_modules/style-loader/dist/options.json
generated
vendored
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"injectType": {
|
||||
"description": "Allows to setup how styles will be injected into DOM (https://github.com/webpack-contrib/style-loader#injecttype).",
|
||||
"enum": [
|
||||
"styleTag",
|
||||
"singletonStyleTag",
|
||||
"lazyStyleTag",
|
||||
"lazySingletonStyleTag",
|
||||
"linkTag"
|
||||
]
|
||||
},
|
||||
"attributes": {
|
||||
"description": "Adds custom attributes to tag (https://github.com/webpack-contrib/style-loader#attributes).",
|
||||
"type": "object"
|
||||
},
|
||||
"insert": {
|
||||
"description": "Inserts `<style>`/`<link>` at the given position (https://github.com/webpack-contrib/style-loader#insert).",
|
||||
"anyOf": [
|
||||
{
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"instanceof": "Function"
|
||||
}
|
||||
]
|
||||
},
|
||||
"base": {
|
||||
"description": "Sets module ID base for DLLPlugin (https://github.com/webpack-contrib/style-loader#base).",
|
||||
"type": "number"
|
||||
}
|
||||
},
|
||||
"additionalProperties": false
|
||||
}
|
||||
65
11-前端模块化开发/04-webpack_Loader使用/node_modules/style-loader/dist/runtime/injectStylesIntoLinkTag.js
generated
vendored
Normal file
65
11-前端模块化开发/04-webpack_Loader使用/node_modules/style-loader/dist/runtime/injectStylesIntoLinkTag.js
generated
vendored
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
"use strict";
|
||||
|
||||
var getTarget = function getTarget() {
|
||||
var memo = {};
|
||||
return function memorize(target) {
|
||||
if (typeof memo[target] === 'undefined') {
|
||||
var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself
|
||||
|
||||
if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {
|
||||
try {
|
||||
// This will throw an exception if access to iframe is blocked
|
||||
// due to cross-origin restrictions
|
||||
styleTarget = styleTarget.contentDocument.head;
|
||||
} catch (e) {
|
||||
// istanbul ignore next
|
||||
styleTarget = null;
|
||||
}
|
||||
}
|
||||
|
||||
memo[target] = styleTarget;
|
||||
}
|
||||
|
||||
return memo[target];
|
||||
};
|
||||
}();
|
||||
|
||||
module.exports = function (url, options) {
|
||||
options = options || {};
|
||||
options.attributes = typeof options.attributes === 'object' ? options.attributes : {};
|
||||
|
||||
if (typeof options.attributes.nonce === 'undefined') {
|
||||
var nonce = typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
|
||||
|
||||
if (nonce) {
|
||||
options.attributes.nonce = nonce;
|
||||
}
|
||||
}
|
||||
|
||||
var link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = url;
|
||||
Object.keys(options.attributes).forEach(function (key) {
|
||||
link.setAttribute(key, options.attributes[key]);
|
||||
});
|
||||
|
||||
if (typeof options.insert === 'function') {
|
||||
options.insert(link);
|
||||
} else {
|
||||
var target = getTarget(options.insert || 'head');
|
||||
|
||||
if (!target) {
|
||||
throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");
|
||||
}
|
||||
|
||||
target.appendChild(link);
|
||||
}
|
||||
|
||||
return function (newUrl) {
|
||||
if (typeof newUrl === 'string') {
|
||||
link.href = newUrl;
|
||||
} else {
|
||||
link.parentNode.removeChild(link);
|
||||
}
|
||||
};
|
||||
};
|
||||
282
11-前端模块化开发/04-webpack_Loader使用/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js
generated
vendored
Normal file
282
11-前端模块化开发/04-webpack_Loader使用/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js
generated
vendored
Normal file
|
|
@ -0,0 +1,282 @@
|
|||
"use strict";
|
||||
|
||||
var stylesInDom = {};
|
||||
|
||||
var isOldIE = function isOldIE() {
|
||||
var memo;
|
||||
return function memorize() {
|
||||
if (typeof memo === 'undefined') {
|
||||
// Test for IE <= 9 as proposed by Browserhacks
|
||||
// @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
|
||||
// Tests for existence of standard globals is to allow style-loader
|
||||
// to operate correctly into non-standard environments
|
||||
// @see https://github.com/webpack-contrib/style-loader/issues/177
|
||||
memo = Boolean(window && document && document.all && !window.atob);
|
||||
}
|
||||
|
||||
return memo;
|
||||
};
|
||||
}();
|
||||
|
||||
var getTarget = function getTarget() {
|
||||
var memo = {};
|
||||
return function memorize(target) {
|
||||
if (typeof memo[target] === 'undefined') {
|
||||
var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself
|
||||
|
||||
if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {
|
||||
try {
|
||||
// This will throw an exception if access to iframe is blocked
|
||||
// due to cross-origin restrictions
|
||||
styleTarget = styleTarget.contentDocument.head;
|
||||
} catch (e) {
|
||||
// istanbul ignore next
|
||||
styleTarget = null;
|
||||
}
|
||||
}
|
||||
|
||||
memo[target] = styleTarget;
|
||||
}
|
||||
|
||||
return memo[target];
|
||||
};
|
||||
}();
|
||||
|
||||
function listToStyles(list, options) {
|
||||
var styles = [];
|
||||
var newStyles = {};
|
||||
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
var item = list[i];
|
||||
var id = options.base ? item[0] + options.base : item[0];
|
||||
var css = item[1];
|
||||
var media = item[2];
|
||||
var sourceMap = item[3];
|
||||
var part = {
|
||||
css: css,
|
||||
media: media,
|
||||
sourceMap: sourceMap
|
||||
};
|
||||
|
||||
if (!newStyles[id]) {
|
||||
styles.push(newStyles[id] = {
|
||||
id: id,
|
||||
parts: [part]
|
||||
});
|
||||
} else {
|
||||
newStyles[id].parts.push(part);
|
||||
}
|
||||
}
|
||||
|
||||
return styles;
|
||||
}
|
||||
|
||||
function addStylesToDom(styles, options) {
|
||||
for (var i = 0; i < styles.length; i++) {
|
||||
var item = styles[i];
|
||||
var domStyle = stylesInDom[item.id];
|
||||
var j = 0;
|
||||
|
||||
if (domStyle) {
|
||||
domStyle.refs++;
|
||||
|
||||
for (; j < domStyle.parts.length; j++) {
|
||||
domStyle.parts[j](item.parts[j]);
|
||||
}
|
||||
|
||||
for (; j < item.parts.length; j++) {
|
||||
domStyle.parts.push(addStyle(item.parts[j], options));
|
||||
}
|
||||
} else {
|
||||
var parts = [];
|
||||
|
||||
for (; j < item.parts.length; j++) {
|
||||
parts.push(addStyle(item.parts[j], options));
|
||||
}
|
||||
|
||||
stylesInDom[item.id] = {
|
||||
id: item.id,
|
||||
refs: 1,
|
||||
parts: parts
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function insertStyleElement(options) {
|
||||
var style = document.createElement('style');
|
||||
|
||||
if (typeof options.attributes.nonce === 'undefined') {
|
||||
var nonce = typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
|
||||
|
||||
if (nonce) {
|
||||
options.attributes.nonce = nonce;
|
||||
}
|
||||
}
|
||||
|
||||
Object.keys(options.attributes).forEach(function (key) {
|
||||
style.setAttribute(key, options.attributes[key]);
|
||||
});
|
||||
|
||||
if (typeof options.insert === 'function') {
|
||||
options.insert(style);
|
||||
} else {
|
||||
var target = getTarget(options.insert || 'head');
|
||||
|
||||
if (!target) {
|
||||
throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");
|
||||
}
|
||||
|
||||
target.appendChild(style);
|
||||
}
|
||||
|
||||
return style;
|
||||
}
|
||||
|
||||
function removeStyleElement(style) {
|
||||
// istanbul ignore if
|
||||
if (style.parentNode === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
style.parentNode.removeChild(style);
|
||||
}
|
||||
/* istanbul ignore next */
|
||||
|
||||
|
||||
var replaceText = function replaceText() {
|
||||
var textStore = [];
|
||||
return function replace(index, replacement) {
|
||||
textStore[index] = replacement;
|
||||
return textStore.filter(Boolean).join('\n');
|
||||
};
|
||||
}();
|
||||
|
||||
function applyToSingletonTag(style, index, remove, obj) {
|
||||
var css = remove ? '' : obj.css; // For old IE
|
||||
|
||||
/* istanbul ignore if */
|
||||
|
||||
if (style.styleSheet) {
|
||||
style.styleSheet.cssText = replaceText(index, css);
|
||||
} else {
|
||||
var cssNode = document.createTextNode(css);
|
||||
var childNodes = style.childNodes;
|
||||
|
||||
if (childNodes[index]) {
|
||||
style.removeChild(childNodes[index]);
|
||||
}
|
||||
|
||||
if (childNodes.length) {
|
||||
style.insertBefore(cssNode, childNodes[index]);
|
||||
} else {
|
||||
style.appendChild(cssNode);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function applyToTag(style, options, obj) {
|
||||
var css = obj.css;
|
||||
var media = obj.media;
|
||||
var sourceMap = obj.sourceMap;
|
||||
|
||||
if (media) {
|
||||
style.setAttribute('media', media);
|
||||
}
|
||||
|
||||
if (sourceMap && btoa) {
|
||||
css += "\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), " */");
|
||||
} // For old IE
|
||||
|
||||
/* istanbul ignore if */
|
||||
|
||||
|
||||
if (style.styleSheet) {
|
||||
style.styleSheet.cssText = css;
|
||||
} else {
|
||||
while (style.firstChild) {
|
||||
style.removeChild(style.firstChild);
|
||||
}
|
||||
|
||||
style.appendChild(document.createTextNode(css));
|
||||
}
|
||||
}
|
||||
|
||||
var singleton = null;
|
||||
var singletonCounter = 0;
|
||||
|
||||
function addStyle(obj, options) {
|
||||
var style;
|
||||
var update;
|
||||
var remove;
|
||||
|
||||
if (options.singleton) {
|
||||
var styleIndex = singletonCounter++;
|
||||
style = singleton || (singleton = insertStyleElement(options));
|
||||
update = applyToSingletonTag.bind(null, style, styleIndex, false);
|
||||
remove = applyToSingletonTag.bind(null, style, styleIndex, true);
|
||||
} else {
|
||||
style = insertStyleElement(options);
|
||||
update = applyToTag.bind(null, style, options);
|
||||
|
||||
remove = function remove() {
|
||||
removeStyleElement(style);
|
||||
};
|
||||
}
|
||||
|
||||
update(obj);
|
||||
return function updateStyle(newObj) {
|
||||
if (newObj) {
|
||||
if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) {
|
||||
return;
|
||||
}
|
||||
|
||||
update(obj = newObj);
|
||||
} else {
|
||||
remove();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = function (list, options) {
|
||||
options = options || {};
|
||||
options.attributes = typeof options.attributes === 'object' ? options.attributes : {}; // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
|
||||
// tags it will allow on a page
|
||||
|
||||
if (!options.singleton && typeof options.singleton !== 'boolean') {
|
||||
options.singleton = isOldIE();
|
||||
}
|
||||
|
||||
var styles = listToStyles(list, options);
|
||||
addStylesToDom(styles, options);
|
||||
return function update(newList) {
|
||||
var mayRemove = [];
|
||||
|
||||
for (var i = 0; i < styles.length; i++) {
|
||||
var item = styles[i];
|
||||
var domStyle = stylesInDom[item.id];
|
||||
|
||||
if (domStyle) {
|
||||
domStyle.refs--;
|
||||
mayRemove.push(domStyle);
|
||||
}
|
||||
}
|
||||
|
||||
if (newList) {
|
||||
var newStyles = listToStyles(newList, options);
|
||||
addStylesToDom(newStyles, options);
|
||||
}
|
||||
|
||||
for (var _i = 0; _i < mayRemove.length; _i++) {
|
||||
var _domStyle = mayRemove[_i];
|
||||
|
||||
if (_domStyle.refs === 0) {
|
||||
for (var j = 0; j < _domStyle.parts.length; j++) {
|
||||
_domStyle.parts[j]();
|
||||
}
|
||||
|
||||
delete stylesInDom[_domStyle.id];
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
88
11-前端模块化开发/04-webpack_Loader使用/node_modules/style-loader/package.json
generated
vendored
Normal file
88
11-前端模块化开发/04-webpack_Loader使用/node_modules/style-loader/package.json
generated
vendored
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
{
|
||||
"name": "style-loader",
|
||||
"version": "1.0.2",
|
||||
"description": "style loader module for webpack",
|
||||
"license": "MIT",
|
||||
"repository": "webpack-contrib/style-loader",
|
||||
"author": "Tobias Koppers @sokra",
|
||||
"homepage": "https://github.com/webpack-contrib/style-loader",
|
||||
"bugs": "https://github.com/webpack-contrib/style-loader/issues",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/webpack"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"engines": {
|
||||
"node": ">= 8.9.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "npm run build -- -w",
|
||||
"clean": "del-cli dist",
|
||||
"validate:runtime": "es-check es3 \"dist/runtime/**/*.js\"",
|
||||
"prebuild": "npm run clean",
|
||||
"build": "cross-env NODE_ENV=production babel src -d dist --copy-files",
|
||||
"postbuild": "npm run validate:runtime",
|
||||
"commitlint": "commitlint --from=master",
|
||||
"security": "npm audit",
|
||||
"lint:prettier": "prettier \"{**/*,*}.{js,json,md,yml,css,ts}\" --list-different",
|
||||
"lint:js": "eslint --cache .",
|
||||
"lint": "npm-run-all -l -p \"lint:**\"",
|
||||
"test:only": "cross-env NODE_ENV=test jest",
|
||||
"test:watch": "npm run test:only -- --watch",
|
||||
"test:coverage": "npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage",
|
||||
"test:manual": "npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js",
|
||||
"pretest": "npm run lint",
|
||||
"test": "npm run test:coverage",
|
||||
"prepare": "npm run build",
|
||||
"release": "standard-version",
|
||||
"defaults": "webpack-defaults"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"peerDependencies": {
|
||||
"webpack": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"loader-utils": "^1.2.3",
|
||||
"schema-utils": "^2.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.7.4",
|
||||
"@babel/core": "^7.7.4",
|
||||
"@babel/preset-env": "^7.7.4",
|
||||
"@commitlint/cli": "^8.2.0",
|
||||
"@commitlint/config-conventional": "^8.2.0",
|
||||
"@webpack-contrib/defaults": "^6.3.0",
|
||||
"@webpack-contrib/eslint-config-webpack": "^3.0.0",
|
||||
"babel-jest": "^24.9.0",
|
||||
"commitlint-azure-pipelines-cli": "^1.0.2",
|
||||
"cross-env": "^6.0.3",
|
||||
"css-loader": "webpack-contrib/css-loader#master",
|
||||
"del": "^5.1.0",
|
||||
"del-cli": "^3.0.0",
|
||||
"es-check": "^5.1.0",
|
||||
"eslint": "^6.7.1",
|
||||
"eslint-config-prettier": "^6.7.0",
|
||||
"eslint-plugin-import": "^2.18.2",
|
||||
"file-loader": "^5.0.2",
|
||||
"husky": "^3.1.0",
|
||||
"jest": "^24.9.0",
|
||||
"jest-junit": "^10.0.0",
|
||||
"jsdom": "^15.2.1",
|
||||
"lint-staged": "^9.5.0",
|
||||
"memfs": "^3.0.1",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^1.19.1",
|
||||
"sass": "^1.23.7",
|
||||
"sass-loader": "^8.0.0",
|
||||
"semver": "^7.1.0",
|
||||
"standard-version": "^7.0.1",
|
||||
"webpack": "^4.41.3",
|
||||
"webpack-cli": "^3.3.10",
|
||||
"webpack-dev-server": "^3.9.0"
|
||||
},
|
||||
"keywords": [
|
||||
"webpack"
|
||||
]
|
||||
}
|
||||
|
|
@ -290,7 +290,8 @@
|
|||
"yargs-parser": "^7.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"css-loader": "^3.6.0"
|
||||
"css-loader": "^3.6.0",
|
||||
"style-loader": "1.00"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/json-schema": {
|
||||
|
|
@ -3541,6 +3542,22 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/style-loader": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/style-loader/-/style-loader-1.0.2.tgz",
|
||||
"integrity": "sha512-xehHGWeCPrr+R/bU82To0j7L7ENzH30RHYmMhmAumbuIpQ/bHmv3SAj1aTRfBSszkXoqNtpKnJyWXEDydS+KeA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"loader-utils": "^1.2.3",
|
||||
"schema-utils": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.9.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"webpack": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/supports-color": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-4.5.0.tgz",
|
||||
|
|
@ -6929,6 +6946,16 @@
|
|||
"resolved": "https://registry.npmmirror.com/strip-eof/-/strip-eof-1.0.0.tgz",
|
||||
"integrity": "sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q=="
|
||||
},
|
||||
"style-loader": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/style-loader/-/style-loader-1.0.2.tgz",
|
||||
"integrity": "sha512-xehHGWeCPrr+R/bU82To0j7L7ENzH30RHYmMhmAumbuIpQ/bHmv3SAj1aTRfBSszkXoqNtpKnJyWXEDydS+KeA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loader-utils": "^1.2.3",
|
||||
"schema-utils": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-4.5.0.tgz",
|
||||
|
|
|
|||
|
|
@ -291,6 +291,7 @@
|
|||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"css-loader": "^3.6.0"
|
||||
"css-loader": "^3.6.0",
|
||||
"style-loader": "1.00"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
body{
|
||||
background-color: antiquewhite;
|
||||
background-color: #f00;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import * as math from "./js/mathTools.js";
|
||||
console.log(math.add(33,44));
|
||||
console.log(math.remove(323,111));
|
||||
require("../src/css/common.css")
|
||||
require("./css/common.css");
|
||||
|
|
@ -9,8 +9,8 @@ module.exports={
|
|||
rules: [
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: ["css-loader"],
|
||||
}
|
||||
use: ["style-loader", "css-loader"],
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
Loading…
Reference in New Issue