一、入口文件main.js

import { isDepend } from './depend.js';
import { fn } from './depend2.js';

if(isDepend){
    console.log('依赖模块1');
} else {
    console.log('没有依赖模块');
}

fn();

function mainFn(){
    console.log('这是主模块');
}

二、依赖模块depend.js

const isDepend = true;
export { isDepend }

三、依赖模块depend2.js

function fn() {
    console.log('依赖模块2');
}
export { fn }

四、出口文件bundle.js

1、浏览代码

2、本质

(function(modules) {
    //...
 })([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

var _depend = __webpack_require__(1);

var _depend2 = __webpack_require__(2);

if (_depend.isDepend) {
    console.log('依赖模块1');
} else {
    console.log('没有依赖模块');
}

(0, _depend2.fn)();

function mainFn() {
    console.log('这是主模块');
}

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var isDepend = true;
exports.isDepend = isDepend;

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

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});
function fn() {
    console.log('依赖模块2');
}
exports.fn = fn;

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

五、总结

可以看到出口文件有调用__webpack_require__函数,webpack的作用得以发挥。

webpack打包之有依赖es2015模块的更多相关文章

  1. webpack打包之有依赖js模块

    一.入口文件main.js var isd = require('./depend.js'); if(isd.isDepend){ console.log('有依赖模块'); } else { con ...

  2. webpack打包之无依赖模块

    一.入口文件main.js // main.js console.log('webpack'); 二.出口文件bundle.js 1.浏览代码 2.本质 // 实际就是一个自执行函数 (functio ...

  3. 性能优化 - 查看 webpack 打包后所有的依赖关系(webpack 可视化工具)

    查看 webpack 打包后所有组件与组件间的依赖关系,针对多余的包文件过大, 剔除首次影响加载的效率问题进行剔除修改,本次采用的是 ==webpack-bundle-analyzer(可视化视图查看 ...

  4. 基于ES6模块标准通过webpack打包HTM5项目

    本篇主要演示通过webpack打包phaser项目,webpack安装方法在此处就不一一赘述了 经常用phaser来写html5游戏的朋友可能会发现,当游戏场景比较多时,如果都写在一个js文件中那么将 ...

  5. webpack打包vue

    一.原理 webpack 背后的原理其实就是把所有的非 js 资源都转换成 js (如把一个 css 文件转换成“创建一个 style 标签并把它插入 document ”的脚本.把图片转换成一个图片 ...

  6. 提升webpack打包速度

    webpack打包文件体积过大,怎么提升速度? 借助webpack visualizer可视化插件,来看构建的情况.这个问题要具体情况具体分析,看看打包文件有哪些块头比较大,哪些不常改变,最好列一个l ...

  7. webpack打包后的文件

    用了webpack打包工具,你是不是有时会疑惑,写了一个很简单的函数,结果生成那么多东西,而且还没有问题?下面,我从三种情况来分析打包后的入口文件,帮助自己理解webpack打包,也为平时定位产出目录 ...

  8. 前端项目模块化的实践2:使用 Webpack 打包基础设施代码

    以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 使用 TypeScript ...

  9. 如何使用webpack打包前端项目

    webpack概述 随着前端体积越来越大,功能越来越丰富,这时候就需要将前端工程化,而 webpack就是用于将前端各种文件打包起来. 一个简单的webpack应该包含以下几个概念 · 入口起点 · ...

随机推荐

  1. Dig skipfish proxystrike

    1.DNS域名信息收集,(Dig,挖掘局域网的信息之前的博客中已经做过介绍) 查询需要认证的域名服务器  dig -t ns    +   网址 使用工具 fierce 判断主机上存活的其他域名服务器 ...

  2. jquery----jquery中的属性的利用

    1.javascript addClass 利用document.getElementById("XX")找到document对象.然后再通过addClass("xxx& ...

  3. poj2513--并查集+欧拉路+字典树

    经典好题,自己不知道哪里错了交上去是RE,可能是数组开的不好吧,字典树老碰到这种问题.. 先马上别人的代码,有空对拍看看 #include <cstdio> #include <cs ...

  4. vue-cli 里axios的使用

    1.axios的安装 cnpm i axios --save 2.axios的引入 安装其他插件的时候,可以直接在 main.js 中引入并 Vue.use(),但是 axios 并不能 use,只能 ...

  5. 通过iostat来查看linux硬盘IO性能|实例分析

    iostat查看linux硬盘IO性能 rrqm/s: 每秒进行 merge 的读操作数目.即 delta(rmerge)/s wrqm/s: 每秒进行 merge 的写操作数目.即 delta(wm ...

  6. 数据库和linux对大小写的区分

  7. hive和hbase比较(整理)

    hive1.可以理解为一种SQL执行引擎,对SQL的支持最终转换为map/reduce任务2.不支持更新.删除操作,但可以插入3.任务不是实时执行,用时一般为数分钟到数小时4.本身可以不存储数据,只存 ...

  8. Django系列(一)

    项目引入静态文件 更改settings.py,为项目下面的每个APP应用,建立静态文件,这里如blog,首先在blog下面建立一个静态文件夹名为statics,注意这里为别名 STATICFILES_ ...

  9. Stuck on "Authenticating with iTunes Store"

    https://forums.developer.apple.com/thread/76803 Try this, it fixed it for me. Open Terminal and run: ...

  10. Python自定义排序

    比如自定义了一个class,并且实例化了这个类的很多个实例,并且组成一个数组.这个数组要排序,是通过这个class的某个字段来排序的.怎么排序呢? 有两种做法: 第一种是定义__cmp__( )方法: ...