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

每日一句

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