webpack: require.ensure与require AMD的区别

原创 2015年07月10日 09:18:02

简介

require-ensurerequire-amd的区别:

  • require-amd
    • 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调函数
    • 语法: require(dependencies: String[], [callback: function(...)])
    • 参数
      • dependencies: 模块依赖数组
      • callback: 回调函数
  • require-ensure
    • 说明: require.ensure在需要的时候才下载依赖的模块,当参数指定的模块都下载下来了(下载下来的模块还没执行),便执行参数指定的回调函数。require.ensure会创建一个chunk,且可以指定该chunk的名称,如果这个chunk名已经存在了,则将本次依赖的模块合并到已经存在的chunk中,最后这个chunk在webpack构建的时候会单独生成一个文件。
    • 语法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])
      • dependencies: 依赖的模块数组
      • callback: 回调函数,该函数调用时会传一个require参数
      • chunkName: 模块名,用于构建时生成文件时命名使用
    • 注意点:requi.ensure的模块只会被下载下来,不会被执行,只有在回调函数使用require(模块名)后,这个模块才会被执行。

示例

require-amd

源代码

  • webpack.config.amd.js

    var path = require("path");
    module.exports = {
        entry: "./example.amd.js",
        output: {
            path: path.join(__dirname, "amd"),
            filename: "[name].bundle.js",
            chunkFilename: "[id].chunk.js"
        }
    };
  • example.amd.js

    require(["./module1"], function(module1) {
        console.log("aaa");
        var module2 = require("./module2");
        console.log("bbb");
    });
  • module1.js

    console.log("module1");
    module.exports = 1;
  • module2.js

    console.log("module2");
    module.exports = 2;    

构建结果

命令行中运行webpack --config webpack.config.amd.js
- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

运行结果

浏览器中运行amd/index.html,控制台输出:

module1
aaa
module2
bbb

require-ensure

源代码

  • webpack.config.ensure.js

    var path = require("path");
    module.exports = {
        entry: "./example.ensure.js",
        output: {
            path: path.join(__dirname, "ensure"),
            filename: "[name].bundle.js",
            chunkFilename: "[name].chunk.js"
        }
    };
  • example.ensure.js

    require.ensure(["./module1"], function(require) {
        console.log("aaa");
        var module2 = require("./module2");
        console.log("bbb");
        require("./module1");
    }, 'test');
  • module1.js
    同上

  • module2.js
    同上

构建结果

命令行中运行webpack --config webpack.config.ensure.js
- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

运行结果

浏览器中运行ensure/index.html,控制台输出:

aaa
module2
bbb
module1

require-ensure-chunk

源代码

  • webpack.config.ensure.chunk.js

    var path = require("path");
    module.exports = {
        entry: "./example.ensur.chunk.js",
        output: {
            path: path.join(__dirname, "ensure-chunk"),
            filename: "[name].bundle.js",
            chunkFilename: "[name].chunk.js"
        }
    };
  • example.ensur.chunk.js

    require.ensure(["./module1"], function(require) {
        console.log("aaa");
        require("./module1");
        console.log("bbb");
    }, 'common');
    
    require.ensure(["./module2"], function(require) {
        console.log("ccc");
        require("./module2");
        console.log("ddd");
    }, 'common');
  • module1.js
    同上

  • module2.js
    同上

构建结果

命令行中运行webpack --config webpack.config.ensure.js
- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

运行结果

浏览器中运行ensure/index.html,控制台输出:

aaa
module1
bbb
ccc
1module2
ddd

源代码

webpack-module-require

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

vue项目优化之按需加载组件-使用webpack require.ensure

使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build  会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash]...

使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

今天太累了,写不了了,先留着写。  1.css3之前       三种方法:圣杯布局 2 , css3新特性    多栏布局    弹性盒模型布局

vue+websocket+express+mongodb实战项目(实时聊天)(一)

继上一个项目用vuejs仿网易云音乐(实现听歌以及搜索功能)后,发现上一个项目单纯用vue的model管理十分混乱,然后我去看了看vuex,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜...

基于webpack的前端工程化开发之多页站点篇(二)

这篇,我们要解决上篇留下的两个问题: webpack如何自动发现entry文件及进行相应的模板配置 如何直接处理后端模板的样式、脚本自动引入问题 目录结构 以expre...

CSS字体和文本

字体是什么字体是“文字的不同体式”或者“字的形体结构”。对于英文而言,每种字体都是由一组具有独特样式的字母、数字和符号组成的。根据外观,字体可以分为不同的类别(font collection),包括衬...
  • zhbhun
  • zhbhun
  • 2015-08-26 14:27
  • 1045

vue按需加载组件-webpack require.ensure

webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)