zoukankan      html  css  js  c++  java
  • 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模块。

  • 相关阅读:
    github
    mysql安装和应用
    11月9日(visio安装很坑)
    11月4日
    11月3日
    10月29日
    10月26日
    10月25日
    9月29日
    9月28日
  • 原文地址:https://www.cnblogs.com/ertingbo/p/7058234.html
Copyright © 2011-2022 走看看