VUE--webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

安装webpack,使用一下命令:

npm install webpack -g
npm install webpack-cli -g

关闭cmd窗口,再次打开,查看版本

C:\Users\john>webpack -v
4.16.2

 

准备文件

新建a.js

(function(){
    //定义全局变量
    //这种方式经常被用到一个匿名函数执行后将一些函数公开到全局
    window.ryf = 'hello john';
})();

一般定义需要被导入的变量或者方法,使用function定义。

如果直接使用var申明,那么HTML导入js之后,就直接有了全局变量,可能会影响当前html的全局变量,会备份该覆盖!推荐使用方法,调用时,才使用变量。

新建test.html ,引入js

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--导入a.js-->
<script src="a.js"></script>
<script>
    console.log(john);  //打印ryf变量
</script>
</body>
</html>

执行访问该网页,打开console控制台会发现打印出变量。

 

Nodejs 编写模块相当的自由,开发者只需要关注 require,exports,module 等几个变量就足够,而为了保持模块的可读性,很推荐把不同功能的代码块都写成独立模块,减少各模块耦合。

module.exports

用来导出代码,初始值为一个空对象{}

修改a.js

(function(){
    //定义全局变量
    //这种方式经常被用到一个匿名函数执行后将一些函数公开到全局
    window.ryf = 'ruanyifeng';
})();

//当前这个包 向外提供一个变量:ryf
//module.exports 则用来导出代码,初始值为一个空对象 {}
module.exports = {
    ryf: ryf
}

require

webpack中可以写commonjs格式的require同步语法

经典的commonjs同步语法

新建b.js

var obj = require('./a.js');

此时webpack会将a.js打包进引用它的文件中,这是最普遍的情形!

 

  

 

posted @ 2018-07-28 20:20  John966  阅读(234)  评论(0编辑  收藏  举报