為什麼要使用webpack:

js中，一個模組想要使用另一個模組的變數，另一個模組必須將這個變數暴露為全域性變數。

暴露為全域性變數：

1,    var a

2,    function(){window.a}

3,    new  Vue（）是全域性變數

這會使得多模組互相覆蓋全域性變數的值。

node和瀏覽器都可以跑js，在瀏覽器下只能寫為全域性變數才能分享變數，但是node只需要把這個變數暴露出去就行，不會產生變數被覆蓋的問題。

在Node眼裡，所有的檔案都是一個模組，任何一個模組都有兩個口，一個入水口，一個出水口。

var msg=‘yes';

module.exports={msg:msg}; （出水口）暴露出去自己的變數

var    a=require('../b.js').msg;（入水口）享用別人的變數

安裝webpack:

1，webpack跑在Node環境下，使用時需要先在官網 https://www.nodejs.org下載node環境。

2，然後在cmd中命令列安裝webpack：npm install -g webpack   (從npm下載安裝包，比較慢）

（或者）cmd中：npm  install -g  cnpm --registry=https://registry.npm.taobao.org\  (從淘寶下載原始碼）.

 區域性安裝：npm install --save-dev（-D）webpack

此時對檔案進行打包可能出現錯誤，提示腳手架檔案錯誤，因為在webpack4的版本里，CLI被單獨分離出來了所以要我們單獨安裝  webpack-cli: npm i -g webpack-cli 安裝完腳手架，按理講是可以正常進行打包了

執行打包命令  webpack a.js bundle.js 結果還是出現錯誤 WARNING in configuration The ‘mode’option has.....

截圖如下：

出現這個錯誤提示並不是我們環境裝錯了，而是webpack4 更新後對webpack語法進行了更嚴格的要求

之前的打包命令webpack a.js bundle.js

這樣就可以成功對檔案進行打包了

小白補充：

開啟powershell:  shift+滑鼠右擊

在被打包檔案目錄下啟用powershell輸入：npx webpack a.js --output-filename bundle.js --output-path . --mode development

入口檔名（a.js)   最終打包檔名(bundle.js)

伺服器中安裝的全域性webpack版本號，不一定符合某個專案需要的版本，一般利用專案區域性安裝webpack解決。

1，進入專案檔案，npm init -y在專案中生成檔案package.json（位於模組的目錄下，用於定義包的屬性）此時npm認為這是一個模組

2，然後在這個專案中安裝區域性webpack：npm install -D webpack，安裝完畢在專案中的packge.json檔案最後自動產生版本資訊“webpack": "^4.16.0"。

3，安裝webpack-cli:npm install -D webpack-cli，安裝完畢在專案中Packge.json檔案產生版本資訊：“webpack-cli": "^3.0.8"。

4，此時可以使用區域性webpack打包：npx webpack a.js  --output-filename  buddle.js   --output-path  .  --mode development

完成！

如果覺得每次都輸入npx webpack a.js --output-filename bundle.js --output-path . --mode development這麼大段麻煩，可以修改packge.json元資訊檔案，在scripts增加命令pack(自定義命令）：

這是在目標檔案a.js目錄中可以直接執行的命令，如果在其它目錄下，比如a.js檔案路徑為：web\demo\a.js  ，你在web 目錄下開啟shell,則必須先進入a.js：cd  web\demo   然後：npm run pack就可以了

輸入命令：npm run pack   即可完成打包工作

可以在專案目錄中建立一個配置檔案webpack.config.js:

將裡面的入口檔案，以及最終打包檔案寫入配置，則在packge.json檔案中，命令pack可以省略入口出口檔案

配置檔案有很多引數，修改後可以簡化工程，自行查詢。

補充命令：

開啟資料夾 web_demo:

cd web_demo

在node環境下執行檔案a.js:

node a.js

檢查npm版本號：

$ npm -v

升級npm:

npm install npm -g

安裝常用的 Node.js web框架模組 express:

$ npm install express

檢視所有全域性安裝的模組：

$ npm list -g

檢視某個模組的版本號:

$ npm list grunt
解除安裝 Node.js 模組:

$ npm uninstall express

用以下命令檢視包是否還存在：

$ npm ls

更新模組：

$ npm update express

搜尋模組：

$ npm search express

生成packge.json檔案：

npm init -y

釋出模組：

$ npm publish

把當前目錄下node_modules子目錄裡邊的對應模組更新至最新版本:

npm update <package>

把全域性安裝的對應命令列程式更新至最新版:

npm update <package> -g

撤銷釋出自己釋出過的某個版本程式碼:

npm unpublish <package>@<version>

檢視某條命令的詳細幫助，例如npm help install:

npm help <command>