webpack对多个模块依赖进行打包
【 webpack3.0.0刚刚出来 所以文章是跟着低版本 教程 操作熟悉 结果好多对不上喔】
七:webpack对多个模块依赖进行打包
通过一刚开始我们了解到 webpack支持commonJS和AMD两种模块机制进行打包,因此我们现在来针对代码中使用commonJS和AMD机制进行做一个demo;
Src源文件增加module1.js module2.js module3.js 代码分别如下:

module1.js 代码:
// module1.js
require(["./module3"], function(){
console.log("Hello Webpack!");
}); Module2.js代码如下:
// module2.js,使用的是CommonJs机制导出包
module.exports = function(a, b){
return a + b;
} Module3.js代码使用AMD机制 // module3.js,使用AMD模块机制
define(['./module2.js'], function(sum){
return console.log("1 + 2 = " + sum(1, 2));
});
// 入口文件 main.js 代码如下:
require("./module1");

我们可以运行下 webpack后 在根目录下生成如下文件:
其中1.build文件夹是commonJS生成的 里面是commonJS的代码;我们再查看页面的代码如下可以看到:
【操作结果没有这样】
我们继续查看控制台输出如下:
【操作结果没有输出】
为止我们可以看到webpack打包可以支持commonJS模块和AMD模块。
webpack对多个模块依赖进行打包的更多相关文章
- webpack中多模块依赖
多模块依赖 刚才的例子,我们仅仅是跑通了webpack通过entry.js入口文件进行打包的例子.下面我们就来看一下它是否真的支持CommonJs和AMD两种模块机制呢?下面我们新建多几个js文件吧! ...
- Spring-boot构建多模块依赖工程时,maven打包异常:程序包xxx不存在
在qizhi项目改版的时候, 所有代码都迁移好了, 但是compile的时候报程序包*****不存在, 具体到某一个类就是: 找不到符号. 下面这篇文章是正解 http://hbxflihua.ite ...
- Webpack 入门指南 - 2.模块
这一次我们谈谈模块问题. 通常我们希望这个项目可以分为多个独立的模块,比如,上一次提高的 hello 函数,如果我们定义为一个模块,其它模块引用之后,直接调用就好了.在前端怎么使用模块呢?这可说来话长 ...
- [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
- webpack 多页面支持 & 公共组件单独打包
webpack - 多页面/入口支持 & 公共组件单独打包 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 we ...
- Angular JS的模块依赖
AngularJS是纯客户端技术,完全用Javascript编写的.它使用的是网页开发的常规技术(HTML,CSS,Javascript),目的是让网页应用开发更快更容易. AngularJS简化应用 ...
- Java 9 揭秘(4. 模块依赖)
文 by / 林本托 Tips 做一个终身学习的人. 在此章节中,主要学习以下内容: 如何声明模块依赖 模块的隐式可读性意味着什么以及如何声明它 限定导出(exports)与非限定导出之间的差异 声明 ...
- webpack快速入门——配置JS压缩,打包
1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugin ...
- webpack快速入门——实战技巧:优雅打包第三方类库
下面说两种方法: 一. 1.引入jQuery,首先安装: cnpm install --save jquery 2.安装好后,在我们的entry.js中引入: import $ from 'jquer ...
随机推荐
- LeetCode--231--2的幂函
问题描述: 给定一个整数,编写一个函数来判断它是否是 2 的幂次方. 示例 1: 输入: 1 输出: true 解释: 2 0 = 1 示例 2: 输入: 16 输出: true 解释: 2 4 ...
- [LintCode] Serialize and Deserialize Binary Tree(二叉树的序列化和反序列化)
描述 设计一个算法,并编写代码来序列化和反序列化二叉树.将树写入一个文件被称为“序列化”,读取文件后重建同样的二叉树被称为“反序列化”. 如何反序列化或序列化二叉树是没有限制的,你只需要确保可以将二叉 ...
- apiCloud 浏览图片
点击链接查看api详情 https://docs.apicloud.com/Client-API/Func-Ext/photoBrowser var photoBrowser = api.requir ...
- 微信小程序发起微信支付
点击链接查看详情:(支付中配置参数需要从后台得到->签名需要从微信申请才可以得到) https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-pay.h ...
- 【洛谷p1319】压缩技术
(许久不见,甚是想念) 压缩技术[传送门] 洛谷上滴算法标签: 然而这是一道入门难度的题.(不管不管,就写它了) 好的先说一下思路吧wait!我忘记了咋做的当时. 首先做题第一道坎儿,如何输入若干个( ...
- linux导出sql数据
1. 导出数据库的数据 在linux命令行下输入 mysqldump -u userName -p dabaseName > fileName.sql 在linux命令行下输入 2. 导出表 ...
- 【PowerDesigner】【1】简单介绍
正文: 创建表格 File→New Model→(Model types; Physical Data Model; Physical Diagram)Model name:名称:DBMS:数据库类型 ...
- 关于linux中用vi新建立一个.c文件无法保存,显示E212错误的时候
在ubuntu16.04环境下,用vi新键.c文件,怎么保存也不能 先按ESC 然后: 在后wq 可是显示文件212错误. 后来知道在建立.c的文件夹的权限不对.这里的权限用 ls -l来查看 ...
- GitHub C 和 C++ 开源库的清单(含示例代码)
内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++标准库,包括了STL容器,算法和函数等. C++ Standard Library:是一系列类 ...
- mongodb副本集修改配置问题
因虚拟机地址被占用,需要重新设置ip地址,这时需要修改副本集中的IP地址配置: 1: 查看配置rs.config():需要找到primary主机,在该主节点服务器上才有权限修改配置 2:rs.remo ...