腳手架工具 npm與Webpack

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網頁

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章