【node.js】webapck --打包工具①
阿新 • • 發佈：2019-01-07
前言：nodeJS的一大優點之一就是js檔案的模組化。每一個js檔案都可以是一個模組，這意味這我們在弄大型專案的時候，不再需要定義大量的全域性變量了。
一、js檔案的弊端
如果a.js檔案要訪問b.js裡定義的變數的話，那b.js定義的變數得定義在全域性，那樣就會造成全域性環境的汙染。（如果全域性定義的變數有重名的，會造成很大困擾）。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <script src="a.js"></script> <script src="d.js"></script> <script> console.log(str + '--1'); a(); b(); </script> </head> <body> </body> </html>
// a.js
function a(){
console.log(str+' --a');
}//b.js
var str = 'hello world';
function b(){
console.log(str + ' --b');
}
二、node模組概念
在一個模組(一個檔案)中定義的變數，其作用域範圍是當前模組，外部不能夠直接的訪問。如果想讓一個模組能夠訪問另一個模組中定義的變數，可以通過module.exports對外提供訪問。
//a.js
var str = require('./b').str;
console.log(str);//b.js var str = 'hello world'; module.exports.str = str; //對外提供訪問
在node的環境下執行a.js，會成功輸出在b.js中定義的變數str，而不會說有全域性環境汙染的問題。
然後問題來了，這樣的寫法只能node上執行，無法運用到瀏覽器中。要怎麼才能運用到瀏覽器中呢？這就運用到了webpack打包工具了。
三、webpack的使用
1、webpack安裝到全域性下的命令
①、安裝webpack
在cmd終端輸入
npm install webpack --g②、輸入webpack -v 檢測是否安裝成功
③、如果能顯示webpackb版本資訊，cd到專案目錄中，輸入打包命令
webpack a.js pack.js
這時專案中就多多出一個pack.js檔案，只需要在index.html中引用pack.js。這時就會瀏覽器控制檯中就會輸出hello world了。
2、webpack安裝到專案目錄下的命令
①、cd到專案目錄中
②、安裝webpack
在cmd終端輸入
npm init -y //建立package.json檔案
npm install webpack --save-dev③、輸入webpack -v 檢測是否安裝成功
④、如果能顯示webpackb版本資訊，輸入打包命令(window系統下命令)
.\\node_modules\\.bin\\webpack a.js pack.js這時專案中就多多出一個pack.js檔案。