VUE--webpack

时间 2019-12-13

标签 vue webpack 繁體版

原文原文链接

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

安装webpack，使用一下命令：webpack

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

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

C:\Users\john>webpack -v
4.16.2

准备文件

新建a.jsnpm

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

通常定义须要被导入的变量或者方法，使用function定义。函数

若是直接使用var申明，那么HTML导入js以后，就直接有了全局变量，可能会影响当前html的全局变量，会备份该覆盖！推荐使用方法，调用时，才使用变量。ui

新建test.html ，引入jsspa

<!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控制台会发现打印出变量。code

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

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打包进引用它的文件中，这是最广泛的情形！

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。