zoukankan      html  css  js  c++  java
  • webpack初步介绍

    我们通过npm -g可以安装一个webpack的东西。

    npm -g叫做全局安装,通常是安装CLI程序(commond line interface)。

    我们只用过一次,装了cnpm。此时就能在CMD中用cnpm

    联网安装:

    cnpm install -g webpack

    web网站,pack打包。顾名思义,可以将整个网站程序打包。

    默认安装的是webpack2,是2015年年底才有的。

    查看版本:不报错,说明webpack安装成功。webpack本质是nodejs程序。安装到了-g的位置,appdata那里。

    webpack让我们可以“裸跑CMD”。不需要标准壳了。

    ┣  webpack_modules

    ┃ ┣ main.js

    ┃ ┣ People.js

    ┃ ┣ yuan.js

    ┣  05_webpack.html

    我们的程序都是裸跑的:


    main.js:

    var yuan = require("./yuan");

    var People = require("./People");

     

    var result1 = yuan.mianji(10);

    var result2 = yuan.zhouchang(10);

    alert(result1);

    alert(result2);

     

    var xiaoming = new People("小明",12,"");

    xiaoming.sayHello();

    People.js:

    function People(name,sex,age){

    this.name = name;

    this.sex = sex;

    this.age = age;

    }

    People.prototype.sayHello = function(){

    alert("你好,我是" + this.name);

    }

     

    module.exports = People;

     

    yuan.js:

    exports.mianji = function(r){

    return 3.14 * r * r;

    }

     

    exports.zhouchang = function(r){

    return 2 * 3.14 * r;

    }

    此时运行webpack命令,在项目根目录的CMD中:

    webpack ./webpack_modules/main.js ./dist/all.js

    黄色的参数表示入口js文件。橙色的参数表示合并打包的js文件。

    也就是说webpack能:

    ① 识别CMD语法,遍历寻访我们require的每一个js文件,将他们都加上“标准壳”,目的就是让浏览器认识exportsrequiremodule这三个词语。如何让浏览器认识的呢?实际上使用的是闭包的模拟。

    ② 能够将所有的js文件合并成为一个文件,此时便于管理、拷贝、发布。

    webpack确实好用,可以裸跑CMD程序!

  • 相关阅读:
    (五)SpringBoot如何定义全局异常
    从 vim 一题看线头 DP 的扩展应用
    Hadoop Shell基本操作
    《需求工程》阅读笔记*part1
    Jmeter系列(16)- 详解 HTTP Request
    Jmeter系列(15)- 配置元件的入门介绍
    Jmeter系列(14)- 前置、后置处理器的入门介绍
    Jmeter系列(13)- 断言Assertions 的入门介绍
    Jmeter系列(12)- 定时器Timers 的入门介绍
    Jmeter系列(11)- 监听器Listeners 的入门介绍
  • 原文地址:https://www.cnblogs.com/pms01/p/7041633.html
Copyright © 2011-2022 走看看