webpack前端打包工具及其安裝使用過程出現的問題
為什麼要使用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>