dayjournal memo

Total 967 articles!!

webpack #002 – CSSの読み込み

Yasunori Kirimoto's avatar


今回は、webpackでCSSを読み込みます。


まず、CSSのサンプルを用意しておきます。


h1 {
    color: #5FC4B6;
}

次に、CSSの読み込みに必要なローダーをインストールします。


npm install -D webpack  style-loader css-loader


インストールが完了したら、「webpack.config.js」と「main.js」を書き換えます。

webpack.config.js


module.exports = {
    entry: './_src/main.js',
    output: {
        path: __dirname + '/build',
        filename: 'app.js'
    },
    module : {
        rules : [
            {
                test: /\.css/,
                loaders: ['style-loader', 'css-loader']
            }
        ]
    }
};

main.js


import {sample01} from "./js/sample01.js";
import {sample02} from "./js/sample02.js";

import "./css/stylesheet.css";

sample01();
sample02();

ファイルの準備ができたらビルドします。


npm run build```

[![](../img/migration/2017/08/webpack_002_03.png)](../img/migration/2017/08/webpack_002_03.png)

<br>

ビルドが成功すると、buildディレクトリに全てのJSとCSSが統合されたapp.jsが作成されます。

### app.js

```javascript

/******/ (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] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = 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;
/******/
/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter) {
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, {
/******/                configurable: false,
/******/                enumerable: true,
/******/                get: getter
/******/            });
/******/        }
/******/    };
/******/
/******/    // getDefaultExport function for compatibility with non-harmony modules
/******/    __webpack_require__.n = function(module) {
/******/        var getter = module &amp;&amp; module.__esModule ?
/******/            function getDefault() { return module['default']; } :
/******/            function getModuleExports() { return module; };
/******/        __webpack_require__.d(getter, 'a', getter);
/******/        return getter;
/******/    };
/******/
/******/    // Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/    // Load entry module and return exports
/******/    return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__js_sample01_js__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__js_sample02_js__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__css_stylesheet_css__ = __webpack_require__(3);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__css_stylesheet_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__css_stylesheet_css__);

Object(__WEBPACK_IMPORTED_MODULE_0__js_sample01_js__["a" /* sample01 */])();
Object(__WEBPACK_IMPORTED_MODULE_1__js_sample02_js__["a" /* sample02 */])();

/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (immutable) */ __webpack_exports__["a"] = sample01;
function sample01() {
    alert('sample01を実行!!');
}

/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (immutable) */ __webpack_exports__["a"] = sample02;
function sample02() {
    alert('sample02を実行!!');
}

/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {

// style-loader: Adds some css to the DOM by adding a <style> tag

// load the styles
var content = __webpack_require__(4);
if(typeof content === 'string') content = [[module.i, content, '']];
// Prepare cssTransformation
var transform;

var options = {}
options.transform = transform
// add the styles to the DOM
var update = __webpack_require__(6)(content, options);
if(content.locals) module.exports = content.locals;
// Hot Module Replacement
if(false) {
    // When the styles change, update the <style> tags
    if(!content.locals) {
        module.hot.accept("!!../../node_modules/css-loader/index.js!./stylesheet.css", function() {
            var newContent = require("!!../../node_modules/css-loader/index.js!./stylesheet.css");
            if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
            update(newContent);
        });
    }
    // When the module is disposed, remove the <style> tags
    module.hot.dispose(function() { update(); });
}

/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {

exports = module.exports = __webpack_require__(5)(undefined);
// imports

// module
exports.push([module.i, "h1 {\n    color: #5FC4B6;\n}\n", ""]);

// exports

/***/ }),
/* 5 */
/***/ (function(module, exports) {

/*
    MIT License http://www.opensource.org/licenses/mit-license.php
    Author Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
module.exports = function(useSourceMap) {
    var list = [];

    // return the list of modules as css string
    list.toString = function toString() {
        return this.map(function (item) {
            var content = cssWithMappingToString(item, useSourceMap);
            if(item[2]) {
                return "@media " + item[2] + "{" + content + "}";
            } else {
                return content;
            }
        }).join("");
    };

    // import a list of modules into the list
    list.i = function(modules, mediaQuery) {
        if(typeof modules === "string")
            modules = [[null, modules, ""]];
        var alreadyImportedModules = {};
        for(var i = 0; i < this.length; i++) {
            var id = this[i][0];
            if(typeof id === "number")
                alreadyImportedModules[id] = true;
        }
        for(i = 0; i < modules.length; i++) {
            var item = modules[i];
            // skip already imported module
            // this implementation is not 100% perfect for weird media query combinations
            //  when a module is imported multiple times with different media queries.
            //  I hope this will never occur (Hey this way we have smaller bundles)
            if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
                if(mediaQuery &amp;&amp; !item[2]) {
                    item[2] = mediaQuery;
                } else if(mediaQuery) {
                    item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
                }
                list.push(item);
            }
        }
    };
    return list;
};

function cssWithMappingToString(item, useSourceMap) {
    var content = item[1] || '';
    var cssMapping = item[3];
    if (!cssMapping) {
        return content;
    }

    if (useSourceMap &amp;&amp; typeof btoa === 'function') {
        var sourceMapping = toComment(cssMapping);
        var sourceURLs = cssMapping.sources.map(function (source) {
            return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
        });

        return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
    }

    return [content].join('\n');
}

// Adapted from convert-source-map (MIT)
function toComment(sourceMap) {
    // eslint-disable-next-line no-undef
    var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
    var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;

    return '/*# ' + data + ' */';
}

/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {

/*
    MIT License http://www.opensource.org/licenses/mit-license.php
    Author Tobias Koppers @sokra
*/

var stylesInDom = {};

var memoize = function (fn) {
    var memo;

    return function () {
        if (typeof memo === "undefined") memo = fn.apply(this, arguments);
        return memo;
    };
};

var isOldIE = memoize(function () {
    // 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
    return window &amp;&amp; document &amp;&amp; document.all &amp;&amp; !window.atob;
});

var getElement = (function (fn) {
    var memo = {};

    return function(selector) {
        if (typeof memo[selector] === "undefined") {
            memo[selector] = fn.call(this, selector);
        }

        return memo[selector]
    };
})(function (target) {
    return document.querySelector(target)
});

var singleton = null;
var singletonCounter = 0;
var stylesInsertedAtTop = [];

var fixUrls = __webpack_require__(7);

module.exports = function(list, options) {
    if (typeof DEBUG !== "undefined" &amp;&amp; DEBUG) {
        if (typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
    }

    options = options || {};

    options.attrs = typeof options.attrs === "object" ? options.attrs : {};

    // 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) options.singleton = isOldIE();

    // By default, add <style> tags to the <head> element
    if (!options.insertInto) options.insertInto = "head";

    // By default, add <style> tags to the bottom of the target
    if (!options.insertAt) options.insertAt = "bottom";

    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];

            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];
            }
        }
    };
};

function addStylesToDom (styles, options) {
    for (var i = 0; i < styles.length; i++) {
        var item = styles[i];
        var domStyle = stylesInDom[item.id];

        if(domStyle) {
            domStyle.refs++;

            for(var j = 0; 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(var j = 0; j < item.parts.length; j++) {
                parts.push(addStyle(item.parts[j], options));
            }

            stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
        }
    }
}

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 insertStyleElement (options, style) {
    var target = getElement(options.insertInto)

    if (!target) {
        throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");
    }

    var lastStyleElementInsertedAtTop = stylesInsertedAtTop[stylesInsertedAtTop.length - 1];

    if (options.insertAt === "top") {
        if (!lastStyleElementInsertedAtTop) {
            target.insertBefore(style, target.firstChild);
        } else if (lastStyleElementInsertedAtTop.nextSibling) {
            target.insertBefore(style, lastStyleElementInsertedAtTop.nextSibling);
        } else {
            target.appendChild(style);
        }
        stylesInsertedAtTop.push(style);
    } else if (options.insertAt === "bottom") {
        target.appendChild(style);
    } else {
        throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
    }
}

function removeStyleElement (style) {
    if (style.parentNode === null) return false;
    style.parentNode.removeChild(style);

    var idx = stylesInsertedAtTop.indexOf(style);
    if(idx >= 0) {
        stylesInsertedAtTop.splice(idx, 1);
    }
}

function createStyleElement (options) {
    var style = document.createElement("style");

    options.attrs.type = "text/css";

    addAttrs(style, options.attrs);
    insertStyleElement(options, style);

    return style;
}

function createLinkElement (options) {
    var link = document.createElement("link");

    options.attrs.type = "text/css";
    options.attrs.rel = "stylesheet";

    addAttrs(link, options.attrs);
    insertStyleElement(options, link);

    return link;
}

function addAttrs (el, attrs) {
    Object.keys(attrs).forEach(function (key) {
        el.setAttribute(key, attrs[key]);
    });
}

function addStyle (obj, options) {
    var style, update, remove, result;

    // If a transform function was defined, run it on the css
    if (options.transform &amp;&amp; obj.css) {
        result = options.transform(obj.css);

        if (result) {
            // If transform returns a value, use that instead of the original css.
            // This allows running runtime transformations on the css.
            obj.css = result;
        } else {
            // If the transform function returns a falsy value, don't add this css.
            // This allows conditional loading of css
            return function() {
                // noop
            };
        }
    }

    if (options.singleton) {
        var styleIndex = singletonCounter++;

        style = singleton || (singleton = createStyleElement(options));

        update = applyToSingletonTag.bind(null, style, styleIndex, false);
        remove = applyToSingletonTag.bind(null, style, styleIndex, true);

    } else if (
        obj.sourceMap &amp;&amp;
        typeof URL === "function" &amp;&amp;
        typeof URL.createObjectURL === "function" &amp;&amp;
        typeof URL.revokeObjectURL === "function" &amp;&amp;
        typeof Blob === "function" &amp;&amp;
        typeof btoa === "function"
    ) {
        style = createLinkElement(options);
        update = updateLink.bind(null, style, options);
        remove = function () {
            removeStyleElement(style);

            if(style.href) URL.revokeObjectURL(style.href);
        };
    } else {
        style = createStyleElement(options);
        update = applyToTag.bind(null, style);
        remove = function () {
            removeStyleElement(style);
        };
    }

    update(obj);

    return function updateStyle (newObj) {
        if (newObj) {
            if (
                newObj.css === obj.css &amp;&amp;
                newObj.media === obj.media &amp;&amp;
                newObj.sourceMap === obj.sourceMap
            ) {
                return;
            }

            update(obj = newObj);
        } else {
            remove();
        }
    };
}

var replaceText = (function () {
    var textStore = [];

    return function (index, replacement) {
        textStore[index] = replacement;

        return textStore.filter(Boolean).join('\n');
    };
})();

function applyToSingletonTag (style, index, remove, obj) {
    var css = remove ? "" : obj.css;

    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, obj) {
    var css = obj.css;
    var media = obj.media;

    if(media) {
        style.setAttribute("media", media)
    }

    if(style.styleSheet) {
        style.styleSheet.cssText = css;
    } else {
        while(style.firstChild) {
            style.removeChild(style.firstChild);
        }

        style.appendChild(document.createTextNode(css));
    }
}

function updateLink (link, options, obj) {
    var css = obj.css;
    var sourceMap = obj.sourceMap;

    /*
        If convertToAbsoluteUrls isn't defined, but sourcemaps are enabled
        and there is no publicPath defined then lets turn convertToAbsoluteUrls
        on by default.  Otherwise default to the convertToAbsoluteUrls option
        directly
    */
    var autoFixUrls = options.convertToAbsoluteUrls === undefined &amp;&amp; sourceMap;

    if (options.convertToAbsoluteUrls || autoFixUrls) {
        css = fixUrls(css);
    }

    if (sourceMap) {
        // http://stackoverflow.com/a/26603875
        css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
    }

    var blob = new Blob([css][/css], { type: "text/css" });

    var oldSrc = link.href;

    link.href = URL.createObjectURL(blob);

    if(oldSrc) URL.revokeObjectURL(oldSrc);
}

/***/ }),
/* 7 */
/***/ (function(module, exports) {

/**
 * When source maps are enabled, `style-loader` uses a link element with a data-uri to
 * embed the css on the page. This breaks all relative urls because now they are relative to a
 * bundle instead of the current page.
 *
 * One solution is to only use full urls, but that may be impossible.
 *
 * Instead, this function "fixes" the relative urls to be absolute according to the current page location.
 *
 * A rudimentary test suite is located at `test/fixUrls.js` and can be run via the `npm test` command.
 *
 */

module.exports = function (css) {
  // get current location
  var location = typeof window !== "undefined" &amp;&amp; window.location;

  if (!location) {
    throw new Error("fixUrls requires window.location");
  }

    // blank or null?
    if (!css || typeof css !== "string") {
      return css;
  }

  var baseUrl = location.protocol + "//" + location.host;
  var currentDir = baseUrl + location.pathname.replace(/\/[^\/]*$/, "/");

    // convert each url(...)
    /*
    This regular expression is just a way to recursively match brackets within
    a string.

     /url\s*\(  = Match on the word "url" with any whitespace after it and then a parens
       (  = Start a capturing group
         (?:  = Start a non-capturing group
             [^)(]  = Match anything that isn't a parentheses
             |  = OR
             \(  = Match a start parentheses
                 (?:  = Start another non-capturing groups
                     [^)(]+  = Match anything that isn't a parentheses
                     |  = OR
                     \(  = Match a start parentheses
                         [^)(]*  = Match anything that isn't a parentheses
                     \)  = Match a end parentheses
                 )  = End Group
              *\) = Match anything and then a close parens
          )  = Close non-capturing group
          *  = Match anything
       )  = Close capturing group
     \)  = Match a close parens

     /gi  = Get all matches, not the first.  Be case insensitive.
     */
    var fixedCss = css.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi, function(fullMatch, origUrl) {
        // strip quotes (if they exist)
        var unquotedOrigUrl = origUrl
            .trim()
            .replace(/^"(.*)"$/, function(o, $1){ return $1; })
            .replace(/^'(.*)'$/, function(o, $1){ return $1; });

        // already a full url? no change
        if (/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/)/i.test(unquotedOrigUrl)) {
          return fullMatch;
        }

        // convert the url to a full url
        var newUrl;

        if (unquotedOrigUrl.indexOf("//") === 0) {
            //TODO: should we add protocol?
            newUrl = unquotedOrigUrl;
        } else if (unquotedOrigUrl.indexOf("/") === 0) {
            // path should be relative to the base url
            newUrl = baseUrl + unquotedOrigUrl; // already starts with '/'
        } else {
            // path should be relative to current directory
            newUrl = currentDir + unquotedOrigUrl.replace(/^\.\//, ""); // Strip leading './'
        }

        // send back the fixed url(...)
        return "url(" + JSON.stringify(newUrl) + ")";
    });

    // send back the fixed css
    return fixedCss;
};

/***/ })
/******/ ])

app.jsを読み込むindex.htmlを作成して実行してみます。stylesheet.cssの内容が実行されているのを確認できます。

index.html


<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>webpack Sample</title>

    <script src="./app.js"></script>

</head>
<body>

    <h1>webpack !!</h1>

</body>
</html>


webpackでCSSも読み込んでビルドすることが可能です。



book

Q&A