webpack打包之有依赖es2015模块
一、入口文件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模块的更多相关文章
- webpack打包之有依赖js模块
一.入口文件main.js var isd = require('./depend.js'); if(isd.isDepend){ console.log('有依赖模块'); } else { con ...
- webpack打包之无依赖模块
一.入口文件main.js // main.js console.log('webpack'); 二.出口文件bundle.js 1.浏览代码 2.本质 // 实际就是一个自执行函数 (functio ...
- 性能优化 - 查看 webpack 打包后所有的依赖关系(webpack 可视化工具)
查看 webpack 打包后所有组件与组件间的依赖关系,针对多余的包文件过大, 剔除首次影响加载的效率问题进行剔除修改,本次采用的是 ==webpack-bundle-analyzer(可视化视图查看 ...
- 基于ES6模块标准通过webpack打包HTM5项目
本篇主要演示通过webpack打包phaser项目,webpack安装方法在此处就不一一赘述了 经常用phaser来写html5游戏的朋友可能会发现,当游戏场景比较多时,如果都写在一个js文件中那么将 ...
- webpack打包vue
一.原理 webpack 背后的原理其实就是把所有的非 js 资源都转换成 js (如把一个 css 文件转换成“创建一个 style 标签并把它插入 document ”的脚本.把图片转换成一个图片 ...
- 提升webpack打包速度
webpack打包文件体积过大,怎么提升速度? 借助webpack visualizer可视化插件,来看构建的情况.这个问题要具体情况具体分析,看看打包文件有哪些块头比较大,哪些不常改变,最好列一个l ...
- webpack打包后的文件
用了webpack打包工具,你是不是有时会疑惑,写了一个很简单的函数,结果生成那么多东西,而且还没有问题?下面,我从三种情况来分析打包后的入口文件,帮助自己理解webpack打包,也为平时定位产出目录 ...
- 前端项目模块化的实践2:使用 Webpack 打包基础设施代码
以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 使用 TypeScript ...
- 如何使用webpack打包前端项目
webpack概述 随着前端体积越来越大,功能越来越丰富,这时候就需要将前端工程化,而 webpack就是用于将前端各种文件打包起来. 一个简单的webpack应该包含以下几个概念 · 入口起点 · ...
随机推荐
- Dig skipfish proxystrike
1.DNS域名信息收集,(Dig,挖掘局域网的信息之前的博客中已经做过介绍) 查询需要认证的域名服务器 dig -t ns + 网址 使用工具 fierce 判断主机上存活的其他域名服务器 ...
- jquery----jquery中的属性的利用
1.javascript addClass 利用document.getElementById("XX")找到document对象.然后再通过addClass("xxx& ...
- poj2513--并查集+欧拉路+字典树
经典好题,自己不知道哪里错了交上去是RE,可能是数组开的不好吧,字典树老碰到这种问题.. 先马上别人的代码,有空对拍看看 #include <cstdio> #include <cs ...
- vue-cli 里axios的使用
1.axios的安装 cnpm i axios --save 2.axios的引入 安装其他插件的时候,可以直接在 main.js 中引入并 Vue.use(),但是 axios 并不能 use,只能 ...
- 通过iostat来查看linux硬盘IO性能|实例分析
iostat查看linux硬盘IO性能 rrqm/s: 每秒进行 merge 的读操作数目.即 delta(rmerge)/s wrqm/s: 每秒进行 merge 的写操作数目.即 delta(wm ...
- 数据库和linux对大小写的区分
- hive和hbase比较(整理)
hive1.可以理解为一种SQL执行引擎,对SQL的支持最终转换为map/reduce任务2.不支持更新.删除操作,但可以插入3.任务不是实时执行,用时一般为数分钟到数小时4.本身可以不存储数据,只存 ...
- Django系列(一)
项目引入静态文件 更改settings.py,为项目下面的每个APP应用,建立静态文件,这里如blog,首先在blog下面建立一个静态文件夹名为statics,注意这里为别名 STATICFILES_ ...
- Stuck on "Authenticating with iTunes Store"
https://forums.developer.apple.com/thread/76803 Try this, it fixed it for me. Open Terminal and run: ...
- Python自定义排序
比如自定义了一个class,并且实例化了这个类的很多个实例,并且组成一个数组.这个数组要排序,是通过这个class的某个字段来排序的.怎么排序呢? 有两种做法: 第一种是定义__cmp__( )方法: ...