npm:一個前端依賴包管理工具,可以使用npm下載項目所需要的依賴包。
全稱是 Node Package Manager
可以參考這篇博客,瞭解npm是做什麼的,https://blog.csdn.net/qq_37696120/article/details/80507178
Webpack:
Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關係進行靜態分析,然後將這些模塊按照指定的規則生成對應的靜態資源。
從圖中我們可以看出,Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態文件,減少了頁面的請求。
1.NodeJS安裝
要使用npm就要先安裝nodejs的環境
Mac
雙擊安裝包安裝。
Windows
選擇msi文件,x64,下載
雙擊安裝包安裝
2.使用npm初始化項目
會在項目中生成package.json文件,所有的npm安裝的文件都會在裏面配置
1.輸入指令:npm init
輸入一些項目參數
2.完成後,項目會生成一個package.json文件
3.npm的常用指令
安裝依賴包:npm install [email protected] xxx代表包名 v代表版本號
卸載依賴包:npm uninstall [email protected]
參數:-g 安裝全局依賴包
參數:--registry=https://registry.npm.taobao.org 如果下載比較慢的話,可以使用我們國家的鏡像下載地址
3.Webpack
3.1 安裝
在全局安裝webpack
在項目下安裝一個webpack
如果輸出webpack -v,要求安裝webpack-cli。
我們先退出,然後安裝一個全局的webpack-cli:npm install --save-dev webpack-cli -g
再執行webpack -v就是正確的了
Webpack就安裝到了node_modules中了
3.2 基礎使用
在項目下寫兩個js文件
在項目根目錄下,新建webpack配置文件,填寫基礎的配置信息
output代表輸出的路徑和輸出的文件名
使用打包命令進行打包 webpack
這時就會在項目的根目錄下生成一個dist/app.js,就是打包生成的文件
3.3 Webpack對腳本的處理
1.輸出多個JS文件,並指定輸出的文件夾
項目裏有兩個js文件,我們想要用webpack分別打包兩個js文件,並將輸出的文件放在dist/js目錄下
使用webpack打包
就會在項目的根目錄下生成
2.在項目中引入Jquery
使用npm安裝jquery:npm install jquery --save
在文件中使用jquery
使用webpack進行打包
打開html網頁