<sup id="sjju3"><noscript id="sjju3"></noscript></sup>
    <big id="sjju3"></big>

  • <blockquote id="sjju3"></blockquote>
    <blockquote id="sjju3"></blockquote>

      <td id="sjju3"></td>

      <big id="sjju3"></big>
        <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
      1. 详解webpack 最简打包结果分析

         更新时间:2019年02月20日 09:28:25   作者:ssshooter   我要评论

        这篇文章主要介绍了详解webpack 最简打包结果分析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

        现在的 webpack 不再是入门噩梦,过去 webpack 最让人心塞的莫过于配置文件,而 webpack4 诞生随之而来的是无配置 webpack。

        使用 webpack4,至少只需要安装 webpack 和 webpack cli。所以大家完全可以自己打一个最简单的包,还能修改插件对比前后的区别。

        npm i webpack webpack-cli -D 安装后,因为 webpack4 会默认 src 为入口目录,所以先新建 src/index.js

        // src/index.js
        import { sth } from './shouldImport'
        import other from './shouldImport'
        
        let test = 'this is a variable'
        
        export default {
         a: test + ',' + sth,
         other,
        }
        
        

        为了更了解 webpack  导入机制所以再新建 src/shouldImport.js。

        // src/shouldImport.js
        export let sth = 'something you need'
        
        export default {
         others: '',
        }
        
        

        然后运行 node_modules/.bin/webpack --mode development 即可在 dist/main.js 看到打包后的文件。

        但是默认设置中模块文件会被 eval 包裹导致不便查看,所以需要再在设置做一点修改,把 devtool 属性改为 'source-map'

        // 在根目录新建 webpack.config.js 文件
        module.exports = mode => {
         if (mode === 'production') {
          return {}
         }
        
         return {
          devtool: 'source-map',
         }
        }
        
        

        然后再打包应该就能看到类似一下的文件结构,开发环境下打包得到的文件?#28304;?#27880;释,理解起来不难:

        ;(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
          // 执?#24515;?#22359;函数(有点不懂为什么 this 要传入 module.exports)
          modules[moduleId].call(
           module.exports, // this
           module, // 模块对象本身
           module.exports, // 模块对象的 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__)
         // 暴露所?#24515;?#22359;对象
         __webpack_require__.m = modules
        
         // expose the module cache
         // 暴露模块缓存
         __webpack_require__.c = installedModules
        
         // Object.prototype.hasOwnProperty.call
         __webpack_require__.o = function(object, property) {
          return Object.prototype.hasOwnProperty.call(object, property)
         }
        
         // define getter function for harmony exports
         // 为 ES6 export 定义 getter 函数
         __webpack_require__.d = function(exports, name, getter) {
          if (!__webpack_require__.o(exports, name)) {
           // 检查属性是否存在
           Object.defineProperty(exports, name, { enumerable: true, get: getter })
          }
         }
        
         // define __esModule on exports
         // 于 export 定义 __esModule
         __webpack_require__.r = function(exports) {
          if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
           Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' })
          }
          Object.defineProperty(exports, '__esModule', { value: true })
         }
        
         // create a fake namespace object
         // 创建代用命名空间对象
         // mode & 1: value is a module id, require it
         // value 是模块 id,必要
         // mode & 2: merge all properties of value into the ns
         // 合并 value 所有属性到 ns
         // mode & 4: return value when already ns object
         // ns 已经是对象时返回 value
         // mode & 8|1: behave like require
         // 表现如 require
         __webpack_require__.t = function(value, mode) {
          if (mode & 1) value = __webpack_require__(value)
          if (mode & 8) return value
          if (mode & 4 && typeof value === 'object' && value && value.__esModule)
           return value
          var ns = Object.create(null)
          __webpack_require__.r(ns)
          Object.defineProperty(ns, 'default', { enumerable: true, value: value })
          if (mode & 2 && typeof value != 'string')
           for (var key in value)
            __webpack_require__.d(
             ns,
             key,
             function(key) {
              return value[key]
             }.bind(null, key)
            )
          return ns
         }
        
         // getDefaultExport function for compatibility with non-harmony modules
         // 用于兼容非 ES6 模块的 getDefaultExport 函数
         __webpack_require__.n = function(module) {
          var getter =
           module && module.__esModule
            ? function getDefault() {
              return module['default']
             }
            : function getModuleExports() {
              return module
             }
          __webpack_require__.d(getter, 'a', getter)
          return getter
         }
        
         // __webpack_public_path__
         __webpack_require__.p = ''
        
         // Load entry module and return exports
         // 加载入口模块并返回 export
         return __webpack_require__((__webpack_require__.s = './src/index.js'))
        })({
         './src/index.js':
          /*! exports provided: default */
          function(module, __webpack_exports__, __webpack_require__) {
           'use strict'
           __webpack_require__.r(__webpack_exports__) // 于 export 定义 __esModule
           /* harmony import */
           var _shouldImport__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
            './src/shouldImport.js'
           )
        
           let test = 'this is a variable'
        
           /* harmony default export */
        
           __webpack_exports__['default'] = {
            a: test + ',' + _shouldImport__WEBPACK_IMPORTED_MODULE_0__['sth'],
            other: _shouldImport__WEBPACK_IMPORTED_MODULE_0__['default'],
           }
          },
        
         './src/shouldImport.js':
          /*! exports provided: sth, default */
          function(module, __webpack_exports__, __webpack_require__) {
           'use strict'
           __webpack_require__.r(__webpack_exports__)
           /* harmony export (binding) */
        
           __webpack_require__.d(__webpack_exports__, 'sth', function() {
            return sth
           })
           let sth = 'something you need'
        
           __webpack_exports__['default'] = {
            others: '',
           }
          },
        })

        源文件中的所有 import export 都会转换为对应的辅助函数。

        • import 对应 __webpack_require__
        • export 对应 __webpack_exports__['default'] 直接赋值和 __webpack_require__.d。

        整理一下整个流程:

        1. 定义 __webpack_require__ 及其辅助函数
        2. 使用 __webpack_require__ 引入入口模块
        3. __webpack_require__ 函数载入模块,将模块放到模块缓存
        4. 调用模块
          1. 同样使用 __webpack_require__ 读取依赖(回到第 3 步)
          2. 运?#24515;?#22359;内部功能
          3. 使用 __webpack_exports__['default'] 直接赋值和 __webpack_require__.d 输出
        5. 运行结束

        以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

        相关文章

        • 原生JS实现的双色球功能示例

          原生JS实现的双色球功能示例

          这篇文章主要介绍了原生JS实现的双色球功能,涉及javascript随机数生成及数值运算相关操作技巧,需要的朋友可以参考下
          2018-02-02
        • JavaScript?#26790;蔆SS属性的几种方式介绍

          JavaScript?#26790;蔆SS属性的几种方式介绍

          要通过元素?#26790;?#26679;式表,那么就应该先确定是哪个元素。直接?#26790;?#26679;式表在该样式块里找相应的样式规则,最后在该样式规则里找相应的样式
          2014-07-07
        • JS?#29992;?#25554;件CryptoJS实现的DES?#29992;?#31034;例

          JS?#29992;?#25554;件CryptoJS实现的DES?#29992;?#31034;例

          这篇文章主要介绍了JS?#29992;?#25554;件CryptoJS实现的DES?#29992;?结合实例形式分析了javascript使用CryptoJS插件进行des?#29992;?#30340;各种常见模式使用技巧,需要的朋友可以参考下
          2018-08-08
        • 从零开始搭建一个react项目开发

          从零开始搭建一个react项目开发

          这篇文章主要介绍了从零开始搭建一个react项目开发,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
          2018-02-02
        • JavaScript去除空格的三种方法(正则/传参函数/trim)

          JavaScript去除空格的三种方法(正则/传参函数/trim)

          个人认为去除空格最好的方法.采用的是正则表达式,这是最核心的原理,同时呢,还是有其他方法可以办到的,接下来将介绍一下三种方法(trim)空格,?#34892;?#36259;的朋友可以了解下,或许对你有帮助呢
          2013-02-02
        • 基于Web标准的UI组件 — 树状菜单(2)

          基于Web标准的UI组件 — 树状菜单(2)

          基于Web标准的UI组件 — 树状菜单(2)...
          2006-09-09
        • Bootstrap CSS布局之表格

          Bootstrap CSS布局之表格

          这篇文章主要为大家详细介绍了Bootstrap CSS布局之表格的相关资?#24076;?#20855;有一定的参?#25216;?#20540;,?#34892;?#36259;的小伙伴们可以参?#23478;?#19979;
          2016-12-12
        • 利用纯JS实现像素逐渐显示的方法示例

          利用纯JS实现像素逐渐显示的方法示例

          这篇文章主要给大家介绍了利用纯JS实现像素逐渐显示的相关资?#24076;?#25991;中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学?#25226;?#20064;吧。
          2017-08-08
        • 原生JS实现层叠轮播图

          原生JS实现层叠轮播图

          这篇文章主要为大家详细介绍了原生JS层叠轮播图,具有一定的参?#25216;?#20540;,?#34892;?#36259;的小伙伴们可以参?#23478;?#19979;
          2017-05-05
        • js 失去焦点时关闭层实现代码

          js 失去焦点时关闭层实现代码

          失去焦点时关闭层实现代码。大家可以参考下。
          2009-05-05

        最新评论

        2018白小姐一肖中特马
        <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
        <big id="sjju3"></big>

      2. <blockquote id="sjju3"></blockquote>
        <blockquote id="sjju3"></blockquote>

          <td id="sjju3"></td>

          <big id="sjju3"></big>
            <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
          1. <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
            <big id="sjju3"></big>

          2. <blockquote id="sjju3"></blockquote>
            <blockquote id="sjju3"></blockquote>

              <td id="sjju3"></td>

              <big id="sjju3"></big>
                <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>