webpack学习指南

作者: 郑伟的菜园子 | 来源:发表于2016-01-07 02:51 被阅读3915次

第44期分析React组件的渲染性能 & Node Buffe
webpack学习指南
Webpack学习指南
发现•分享—2019-01-14
iOS智能家居HomeKit学习指南
了不起的 Webpack Scope Hoisting 学习指南
React Natve之技能树点亮计划
强化学习指南
web服务器软件
整理了python入门学习指南，标准库，视频学习资料和电子书籍，

就我了解的前端团队来说，用得最多的应该是grunt和gulp，grunt基本上已经"死"了，因为grunt作者最近已经停止维护了，基本上在找人接盘，所以，在一段时间内，我们用我们在课堂内学的gulp就满足需求了。时下node社区异常火爆，我们这段时间如果关注一些技术最新动态会发现有browserify,webpack等各种新奇的玩意，观察一些最新的开源项目，我们会慢慢发现，webpack慢慢的有一种在比较最新最热门的前端项目中成为事实标准的感觉，所以我把我的使用过程的步骤贴出来，供同学们如果有兴趣可以玩一下。安装过程：

cnpm install webpack -g

创建一个工程文件夹，初始化npm

npm init

{
  "name": "eric",
  "version": "1.0.0",
  "description": "墨鱼教育",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "ericzheng",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.23.0",
    "file-loader": "^0.8.5",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.9"
  }
}

然后，我们再把webpack以--save-dev的模式安装到我们这个文件夹下面：

cnpm install webpack --save-dev

现在，我们就可以使用webpack了，跟gulp一样，我们要创建一个webpack.config.js如下：

module.exports = {
    entry:'./main.js',
    output:{
         path: './build', // This is where images AND js will go
             publicPath: 'http://yoururl.com/', // This is used to generate URLs
         filename:'bundle.js'
    },
    module:{
        loaders:[
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    }
};

webpack 目前为用到的不是很多功能基本的配置足够满足日常开发需求了，比如模块化打包压缩 css js img file 等静态文件的打包、sass的预编译、es6转es5等等这些

<html>
  <head>
    <script type="text/javascript" src="build/bundle.js"></script>
  </head>
  <body>
    <h1>Webpack Demo</h1>
  </body>
</html>

main.js代码:

require("./1.css");
require("./second.js");
document.write("webpack for the1 win");

second.js

module.exports = document.write("Oh yeah another file");

* @Last Modified by:eric zheng
* @Last Modified time:2015-11-27 18:06:31
* @WebSite:moyu-edu.com
* @Motto:stay foolish stay hungry
*/
body{
    background:red;
    transition:all ease 10s;
    color:white;
}
运行webpack、编译后的代码如下
/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }


/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "http://yoururl.com/";

/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(1);
    __webpack_require__(5);
    document.write("webpack for the1 win");

/***/ },
/* 1 */
/***/ 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__(2);
    if(typeof content === 'string') content = [[module.id, content, '']];
    // add the styles to the DOM
    var update = __webpack_require__(4)(content, {});
    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!./1.css", function() {
                var newContent = require("!!./node_modules/css-loader/index.js!./1.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(); });
    }

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

    exports = module.exports = __webpack_require__(3)();
    // imports


    // module
    exports.push([module.id, "/* \r\n* @Author: eric zheng\r\n* @Date:2015-11-27 18:02:44\r\n* @Last Modified by:eric zheng\r\n* @Last Modified time:2015-11-27 18:09:23\r\n* @WebSite:moyu-edu.com\r\n* @Motto:stay foolish stay hungry\r\n*/\r\nbody{\r\n\tbackground:yellow;\r\n\ttransition:all ease 10s;\r\n\tcolor:white;\r\n}", ""]);

    // exports


/***/ },
/* 3 */
/***/ 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() {
        var list = ;

        // return the list of modules as css string
        list.toString = function toString() {
            var result = ;
            for(var i = 0; i < this.length; i++) {
                var item = this[i];
                if(item[2]) {
                    result.push("@media " + item[2] + "{" + item[1] + "}");
                } else {
                    result.push(item[1]);
                }
            }
            return result.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 && !item[2]) {
                        item[2] = mediaQuery;
                    } else if(mediaQuery) {
                        item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
                    }
                    list.push(item);
                }
            }
        };
        return list;
    };


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

    /*
        MIT License http://www.opensource.org/licenses/mit-license.php
        Author Tobias Koppers @sokra
    */
    var stylesInDom = {},
        memoize = function(fn) {
            var memo;
            return function () {
                if (typeof memo === "undefined") memo = fn.apply(this, arguments);
                return memo;
            };
        },
        isOldIE = memoize(function() {
            return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
        }),
        getHeadElement = memoize(function () {
            return document.head || document.getElementsByTagName("head")[0];
        }),
        singletonElement = null,
        singletonCounter = 0,
        styleElementsInsertedAtTop = ;

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

        options = options || {};
        // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
        // tags it will allow on a page
        if (typeof options.singleton === "undefined") options.singleton = isOldIE();

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

        var styles = listToStyles(list);
        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);
                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) {
        var styles = ;
        var newStyles = {};
        for(var i = 0; i < list.length; i++) {
            var item = list[i];
            var id = 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, styleElement) {
        var head = getHeadElement();
        var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
        if (options.insertAt === "top") {
            if(!lastStyleElementInsertedAtTop) {
                head.insertBefore(styleElement, head.firstChild);
            } else if(lastStyleElementInsertedAtTop.nextSibling) {
                head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);
            } else {
                head.appendChild(styleElement);
            }
            styleElementsInsertedAtTop.push(styleElement);
        } else if (options.insertAt === "bottom") {
            head.appendChild(styleElement);
        } else {
            throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
        }
    }

    function removeStyleElement(styleElement) {
        styleElement.parentNode.removeChild(styleElement);
        var idx = styleElementsInsertedAtTop.indexOf(styleElement);
        if(idx >= 0) {
            styleElementsInsertedAtTop.splice(idx, 1);
        }
    }

    function createStyleElement(options) {
        var styleElement = document.createElement("style");
        styleElement.type = "text/css";
        insertStyleElement(options, styleElement);
        return styleElement;
    }

    function createLinkElement(options) {
        var linkElement = document.createElement("link");
        linkElement.rel = "stylesheet";
        insertStyleElement(options, linkElement);
        return linkElement;
    }

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

        if (options.singleton) {
            var styleIndex = singletonCounter++;
            styleElement = singletonElement || (singletonElement = createStyleElement(options));
            update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
            remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
        } else if(obj.sourceMap &&
            typeof URL === "function" &&
            typeof URL.createObjectURL === "function" &&
            typeof URL.revokeObjectURL === "function" &&
            typeof Blob === "function" &&
            typeof btoa === "function") {
            styleElement = createLinkElement(options);
            update = updateLink.bind(null, styleElement);
            remove = function() {
                removeStyleElement(styleElement);
                if(styleElement.href)
                    URL.revokeObjectURL(styleElement.href);
            };
        } else {
            styleElement = createStyleElement(options);
            update = applyToTag.bind(null, styleElement);
            remove = function() {
                removeStyleElement(styleElement);
            };
        }

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

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

        return function (index, replacement) {
            textStore[index] = replacement;
            return textStore.filter(Boolean).join('\n');
        };
    })();

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

        if (styleElement.styleSheet) {
            styleElement.styleSheet.cssText = replaceText(index, css);
        } else {
            var cssNode = document.createTextNode(css);
            var childNodes = styleElement.childNodes;
            if (childNodes[index]) styleElement.removeChild(childNodes[index]);
            if (childNodes.length) {
                styleElement.insertBefore(cssNode, childNodes[index]);
            } else {
                styleElement.appendChild(cssNode);
            }
        }
    }

    function applyToTag(styleElement, obj) {
        var css = obj.css;
        var media = obj.media;
        var sourceMap = obj.sourceMap;

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

        if(styleElement.styleSheet) {
            styleElement.styleSheet.cssText = css;
        } else {
            while(styleElement.firstChild) {
                styleElement.removeChild(styleElement.firstChild);
            }
            styleElement.appendChild(document.createTextNode(css));
        }
    }

    function updateLink(linkElement, obj) {
        var css = obj.css;
        var media = obj.media;
        var sourceMap = obj.sourceMap;

        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], { type: "text/css" });

        var oldSrc = linkElement.href;

        linkElement.href = URL.createObjectURL(blob);

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


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

    module.exports = document.write("Oh yeah another file");

/***/ }
/******/ ]);[/i][/i][/i][/i][/i][/i][/i]

经过我的使用，我的个人建议是：如果你的项目使用react.js之类的，建议用webpack,跟风的必要性不大，但如果认为是趋势的话那么替换就是必要的了，否则，用gulp完全可以满足需求。

第44期分析React组件的渲染性能 & Node Buffe
了不起的 Webpack HMR 学习指南（含源码分析） Hot Module Replacement（以下简称：...
webpack学习指南
就我了解的前端团队来说，用得最多的应该是grunt和gulp，grunt基本上已经"死"了，因为grunt作者最近...
Webpack学习指南
Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部...
发现•分享—2019-01-14
工具 webpack源码分析 -- 源网站程序员英语学习指南：不出国如何练就一口流利的英语-知乎一篇web...
iOS智能家居HomeKit学习指南
iOS智能家居HomeKit学习指南 iOS智能家居HomeKit学习指南
了不起的 Webpack Scope Hoisting 学习指南
最近原创文章?：《1.2w字｜初中级前端 JavaScript 自测清单 - 1》《了不起的 Webpac...
React Natve之技能树点亮计划
React Native 高质量学习资料汇总React Native学习指南React Native学习指南Git...
强化学习指南
强化学习指南
web服务器软件
web服务器软件学习指南
整理了python入门学习指南，标准库，视频学习资料和电子书籍，
入门学习指南标准库视频学习资料