webpack 异步加载配置文件_详解webpack异步加载业务模块

虽然把我们用到的JS文件全部打包一个可以节省请求数,但如果打包后的JS文件过大,那么也容易出现白屏现象,许多操作失灵。而且一些区域是点到才出现,那么相关的JS其实可以剥离出这个大JS文件外。这就涉及到异步加载了。异步加载是SPA的重要构建方式之一。

我们沿着上一篇的目录,这次学习webpack的require.ensure API。此文件也叫做ensure.html,涉及到avalon, jquery,还有两个业务代码ensure.js与ensure_a.js.

先看我们的页面:

require.ensure

{{aaa}}

我们的目的是在点击按钮后,再动态生成一个HTML区域,里面使用avalon进行渲染。

//ensure.js

var avalon = require("avalon")

avalon.define({

$id: "test",

aaa: "测试require.ensure效果",

click: function () {

avalon.log("进入点击事件回调")

if (!avalon.vmodels.bbb) {

require.ensure(["jquery"], function () {//这里是异步的

console.log("进入require.ensure回调")

require("./ensure_a.js")

console.log("调用完require.ensure")

})

}

}

})

它需要动态加载另一个业务代码,并且必须待到jquery加载回来才执行。

var avalon = require("avalon")

var $ = require("jquery")

avalon.log("这是异步加载的脚本")

$("#add").html("

{{bbb}}
")

var vm = avalon.define({

$id: "bbb",

bbb: "这是新加的内容"

})

avalon.scan($("#add")[0], vm)

最后我们看重头戏的webpack.config.js, 为了抽象异步的部分为一个独立的文件,我们需要为它指定名字,这使用output.chunkFilename配置项实现,还需要指定路径,这使用output.publicPath配置项实现。

var webpack = require("webpack");

var path = require("path");

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {

entry: {

index: './dev/index', //我们开发时的入口文件

router: './dev/router',

router2: './dev/router2',

ensure: './dev/ensure'

},

output: {

path: path.join(__dirname, "dist"),

filename: "[name].js",

publicPath:"dist/", //给require.ensure用

chunkFilename: "[name].chunk.js"//给require.ensure用

}, //页面引用的文件

module: {

loaders: [

{test: /\.css$/, loader: 'style-loader!css-loader'}

],

preLoaders: [

{test: /\.js$/, loader: "amdcss-loader"}

]

},

plugins: [commonsPlugin],

resolve: {

extensions: ['.js', "", ".css"],

alias: {

jquery: path.join(__dirname, 'dev/jquery/jquery.js'),

avalon: path.join(__dirname, 'dev/avalon/avalon.shim'), //在正常情况下我们以CommonJS风格引用avalon,以require('avalon')

'../avalon': path.join(__dirname, 'dev/avalon/avalon.js')//由于oniui都以是../avalon来引用avalon的,需要在这里进行别名

}

}

}

然后执行webpack命令就能看到效果:

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

时间: 2017-06-21

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/344187.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[渝粤教育] 西南科技大学 基础工业工程 在线考试复习资料

基础工业工程——在线考试复习资料 一、单选题 1.线路图是以作业现场为对象,对( )进行分析。 A.现场布置及物料和作业者的实际流通路线 B.物料的加工路线 C.人员的流通路线 D.机器、工作台的相互位置 2.流程程序图是对生产现场的整个制造程序作( )的记录。 A.全面 B.大概 C.详…

antlr4 代码 语法树_使用ANTLR4,用于代码镜像和基于Web的DSL的Primefaces扩展

antlr4 代码 语法树DSL是很酷的东西,但我不清楚它们有什么用。 然后我意识到它们对以下方面有好处: 摆脱复杂的UI 意思是 更快的做事方式 而已。 当我阅读此博客时,我得出了这个结论。 如果您的用户是技术人员,并且不惧怕类…

[渝粤教育] 西南科技大学 工程力学 在线考试复习资料

工程力学——在线考试复习资料 一、判断题 1.平面图形的静矩与坐标系无关。 2.弯矩图上的极值就是梁内最大的弯矩。 3.悬臂梁或外伸梁的自由端处弯矩必定为零。 4.弯矩图应画在梁受拉的一侧。 5.当挤压面为圆柱形侧面时,挤压面的计算面积按该圆柱侧面的正投影面…

appium的python教程_移动App Appium自动化测试教程Appium+Python 【2018年新】_IT教程网...

资源名称:移动App Appium自动化测试教程AppiumPython 【2018年新】资源目录:第一章:App自动化测试概述1-1 Appium自动化课程简介1-2 课程大纲1-3 移动设备操作系统兴亡简史1-4 移动App自动化测试兵器发展历程1-5 移动App自动化测试兵器发展历…

Derby数据库备份

抽象 我已经发布了许多有关Derby的博客: 同一主机上的多个Derby网络服务器 Apache Derby数据库用户和权限 与Maven和内存中Derby数据库的集成测试 这本不打算是一个系列。 但是多年来,我越来越多地使用Derby。 最近,我开始将Derby用作微服…

[渝粤教育] 西南科技大学 市场营销理论与实务 在线考试复习资料2021版(1)

市场营销理论与实务——在线考试复习资料2021版 一、单选题 1.处于市场不景气或原料.能源供应紧张时期,( )产品线反而能使总利润上升。 A.增加 B.扩充 C.延伸 D.缩减 答案:看左边查询 2.以高于价值的价格将新产品推入市场,然后…

[渝粤教育] 西南科技大学 建筑经济与企业管理 在线考试复习资料

建筑经济与企业管理——在线考试复习资料 一、单选题 1.某建筑公司预计今后5年中,每年末拿出50万元作为生产基金,将其投资生产预制构件,投资年利率为12%。到第五年末,该公司共得( )万元 A.305.3 B.317.64 C.320.7 D.330 2.某公司拟投资一个项目,预计建成后每年能获利50万元…

cnn 一维时序数据_蚂蚁集团智能监控的时序异常检测:基于 CNN 神经网络的异常检测...

1背景在蚂蚁集团智能监控领域,时序异常检测是极重要一环,异常检测落地中,业务方参考业界标准输出 Metrics 指标数据,监控不同业务、应用、接口、集群的各项指标,包含 Metrics 指标(总量、失败量、耗时等)和系统服务指标…

[渝粤教育] 西南科技大学 投资经济学 在线考试复习资料(1)

投资经济学——在线考试复习资料 一、单选题 1.投资决策是经济决策的重要组成部分,是选择和决定( )的过程 A.投资资金 B.投资行动方案 C.投资机会 D.投资目的 2.下面属于第三产业的行业是( ) A.制造业 B.建筑业 C.农业 D.商业 3.重视资金的( )是正确确定项目成本和收益的不可…

python写图片爬取软件_python抓取整个网站图片

Python分布式爬虫原理转载 permike 原文 Python分布式爬虫原理首先,我们先来看看,如果是人正常的行为,是如何获取网页内容的。(1)打开浏览器,输入URL,打开源网页(2)选取我们想要的内容,包括标题&#xff0c…

[渝粤教育] 西南科技大学 数据库应用 在线考试复习资料

数据库应用——在线考试复习资料 一、单选题 1.“表达式生成器”是用来书写什么的? A.代码 B.程序 C.表达式 D.数据库 2.在使用计算控件时,每个表示式前必须加上哪种运算符号? A. B. C.? D.* 3.以下属于非绑定控件的是哪一个? A.文本框 B.单选按钮 C.组合框 D.直线控件 …

[渝粤教育] 西南科技大学 机械制造装备及工艺 在线考试复习资料

机械制造装备及工艺——在线考试复习资料 一、单选题 1. 金属切削过程中,工件材料的塑性或韧性越高,切屑越不易折断,使切屑与前刀面间的摩擦增大,故切削力( ) A.变化不定 B.增大 C.增小 D.不变 2. 金属切削过程中,在温度很高时,接触面间切屑底层金属呈…

JBoss模块很烂,无法在JBoss 7下使用自定义Resteasy / JAX-RS

由于JBoss EAP 6.1 / AS 7.2.0是模块化的,并且您可以排除Webapp可见的模块,因此您希望可以轻松地忽略内置的JAX-RS实现(Rest Easy 2.3.6)并使用它。自定义的(3.0.6)。 但是,可悲的是&#xff0c…

cad怎么将图层后置_CAD中如何将某1个图层置于其他图层之上.doc

CAD中如何将某1个图层置于其他图层之上《CAD一千零一个技巧》图层管理17种用法 CAD具备强大的图层工具功能,统计一共有17种,这17种应用大大地满足了用户编辑图层的需求,而这17种图层工具的具体应用,你都会吗??1、图层…

[渝粤教育] 西南科技大学 液压与气压传动 在线考试复习资料(1)

液压与气压传动——在线考试复习资料 一、单选题 1.柱塞泵与其它泵相比( )次 A.工作压力高 B.效率低 C.速度低 D.工作压力低 2.变量泵是( ) A.排量不可变 B.排量可变 C.压力可变 D.转速可变 3.卸荷回路是属于( ) A.压力控制回路 B.方向控制回路 C.加速控制回路 D.减速控制回路…

Eclipse GlassFish 5.1就在这里!

Eclipse GlassFish 5.1的发布是Jakarta EE的重要里程碑! 首先,这证实了Oracle提供的GlassFish源代码可以在Eclipse Infrastructure上构建和组装。 第二, 通过通过Java EE 8兼容性测试,它可以验证所贡献的代码是否符合Java EE 8…

[渝粤教育] 西南科技大学 电器设备及维修 在线考试复习资料

电器设备及维修——在线考试复习资料 一、单选题 1.复合同步信号包括行同步信号和( )。 A.场同步信号 B.行消隐信号 C.场消隐信号 D.场均衡信号 2.高频头主要由输入回路,混频器,本振电路和( )组成 A.自动亮度调节电路 B.自动频率调节电路 C.同步检波器 D.高频放大器 3.…

标签蛋白_His标签蛋白镍柱纯化后总有一条杂带怎么办?

小明His标签蛋白镍柱纯化有杂带怎么办啊汇研生物——His标签蛋白纯化填料家簇1.样品本身的的属性,His蛋白容易被体系中的蛋白酶降解时,此时就要在样品中加入蛋白酶抑制剂。避免在纯化过程中His蛋白被降解,呈现出纯化后纯度下降。2.His蛋白和其…

[渝粤教育] 西南科技大学 畜牧概论 在线考试复习资料

畜牧概论——在线考试复习资料 一、单选题 1.色氨酸在动物体内可转变为下列那一种维生素。 A.烟酸 B.叶酸 C.泛酸 D.生物素 2.根据蛋白质中的平均蛋含量可知,1克氮能合成粗蛋白质多少克。 A.5.25 B.6.00 C.6.25 D.6.75 3.赖氨酸与下列那一种氨基酸之间存在颉抗作用。 A.精氨酸…

bootstrap 树形表格渲染慢_bootstrap table轻松实现数据表格

在使用bootstrap table时可能在很多时候回用的表格来显示数据,如果自己写那肯定没问题,但是数据展示出来就麻烦多了,然而bootstrap table 封装了一套完善的数据表格组件,把从后台请求的数据很容易就展示出来了,bootstr…