深入理解webpack打包机制

发布时间：2020-12-24 12:49:19 所属栏目：资源来源：网络整理

导读：副标题#e# 一、单入口文件如何打包 /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.j

副标题[/!--empirenews.page--]

一、单入口文件如何打包

/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 = {
entry: {
index: [path.resolve(dirname,'../src/single/index.js')]
},output: {
path: path.resolve(dirname,'../dist'),filename: '[name].[chunkhash:8].js'
}
};

运行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>

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>

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

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

1/17

尾页