设为首页 - 加入收藏 ASP站长网(Aspzz.Cn)- 科技、建站、经验、云计算、5G、大数据,站长网!
热搜: 创业者 数据 手机
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

深入理解webpack打包机制

发布时间:2020-12-24 09:09 所属栏目:34 来源:网络整理
导读:一、单入口文件如何打包 /src/single/index.js index2 = require( util = require( console.log(index2); console.log(util); /src/single/index2.js util = require( = ; /src/single/util.js module.exports = ; /config/webpack.config.single.js webpack

一、单入口文件如何打包

/src/single/index.js

index2 = require( util = require(console.log(index2);
console.log(util);

/src/single/index2.js

util = require(= ;

/src/single/util.js

module.exports = ;

/config/webpack.config.single.js

webpack = require( path = require(module.exports =<span style="color: #000000"> {
entry: {
index: [path.resolve(dirname,<span style="color: #800000">'<span style="color: #800000">../src/single/index.js<span style="color: #800000">'<span style="color: #000000">)]
},output: {
path: path.resolve(dirname,<span style="color: #800000">'<span style="color: #800000">../dist<span style="color: #800000">'<span style="color: #000000">),filename: <span style="color: #800000">'<span style="color: #800000">[name].[chunkhash:8].js<span style="color: #800000">'<span style="color: #000000">
}
};

运行webpack命令

webpack --config ./config/webpack.config.single.js

深入理解webpack打包机制

得到的单个打包文件/dist/index.35dff1f1.js

(function(modules) { installedModules =</span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; The require function模块加载函数</span>

<span style="color: #000000"> function __webpack_require__(moduleId) {

    </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; Check if module is in cache判断模块是否已经加载过,若加载过直接返回加载的模块</span>
    <span style="color: #0000ff"&gt;if</span><span style="color: #000000"&gt;(installedModules[moduleId]) {
         </span><span style="color: #0000ff"&gt;return</span><span style="color: #000000"&gt; installedModules[moduleId].exports;
    }
     </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; Create a new module (and put it into the cache)</span>
     <span style="color: #0000ff"&gt;var</span> module = installedModules[moduleId] =<span style="color: #000000"&gt; {
         i: moduleId,l: </span><span style="color: #0000ff"&gt;false</span><span style="color: #000000"&gt;,exports: {}
     };

     </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; Execute the module function执行加载函数</span>

<span style="color: #000000"> modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);

     </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; Flag the module as loaded标记该模块已经加载</span>
    module.l = <span style="color: #0000ff"&gt;true</span><span style="color: #000000"&gt;;

    </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; Return the exports of the module</span>
     <span style="color: #0000ff"&gt;return</span><span style="color: #000000"&gt; module.exports;
 }


</span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; expose the modules object (__webpack_modules__)</span>
 __webpack_require__.m =<span style="color: #000000"&gt; modules;

 </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; expose the module cache</span>
__webpack_require__.c =<span style="color: #000000"&gt; installedModules;

 </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; define getter function for harmony exports</span>
 __webpack_require__.d =<span style="color: #000000"&gt; function(exports,name,getter) {
     </span><span style="color: #0000ff"&gt;if</span>(!<span style="color: #000000"&gt;__webpack_require__.o(exports,name)) {
         Object.defineProperty(exports,{
             configurable: </span><span style="color: #0000ff"&gt;false</span><span style="color: #000000"&gt;,enumerable: </span><span style="color: #0000ff"&gt;true</span><span style="color: #000000"&gt;,</span><span style="color: #0000ff"&gt;get</span><span style="color: #000000"&gt;: getter
        });
     }
 };

 </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; getDefaultExport function for compatibility with non-harmony modules</span>
 __webpack_require__.n =<span style="color: #000000"&gt; function(module) {
     </span><span style="color: #0000ff"&gt;var</span> getter = module &amp;&amp; module.__esModule ?<span style="color: #000000"&gt;
         function getDefault() { </span><span style="color: #0000ff"&gt;return</span> module[<span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;default</span><span style="color: #800000"&gt;'</span><span style="color: #000000"&gt;]; } :
         function getModuleExports() { </span><span style="color: #0000ff"&gt;return</span><span style="color: #000000"&gt; module; };
     __webpack_require__.d(getter,</span><span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;a</span><span style="color: #800000"&gt;'</span><span style="color: #000000"&gt;,getter);
     </span><span style="color: #0000ff"&gt;return</span><span style="color: #000000"&gt; getter;
};

 </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; Object.prototype.hasOwnProperty.call</span>
 __webpack_require__.o = function(<span style="color: #0000ff"&gt;object</span>,property) { <span style="color: #0000ff"&gt;return</span> Object.prototype.hasOwnProperty.call(<span style="color: #0000ff"&gt;object</span><span style="color: #000000"&gt;,property); };

 </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; __webpack_public_path__</span>
 __webpack_require__.p = <span style="color: #800000"&gt;""</span><span style="color: #000000"&gt;;

 </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; Load entry module and return exports</span>
 <span style="color: #0000ff"&gt;return</span> __webpack_require__(__webpack_require__.s = <span style="color: #800080"&gt;1</span><span style="color: #000000"&gt;);

(编辑:ASP站长网)

网友评论
推荐文章
    热点阅读