webpack前端構建工具學習總結(一)之webpack安裝、創建項目


npm是隨nodeJs安裝包一起安裝的包管理工具,能解決NodeJS代碼部署上的很多問題;

常見的使用場景有以下幾種:

  • 允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
  • 允許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
  • 允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用。
nodejs的官網地址: https://nodejs.org/en/
nodejs中文網地址: http://nodejs.cn/
1.從node.js官網下載最新安裝包進行安裝
2.windows系統下,windows+R調出命令,輸入cmd,打開命令工具,檢測npm是否安裝:輸入命令:npm -v
 
3.使用npm安裝webpack:輸入命令:npm install webpack -g
 

將webpack安裝到全局環境中

4.輸入命令:webpack -v,查看當前webpack的版本號

5.進入項目目錄,輸入命令:npm init,生成package.json文件

package.json的文件內容:

 

6.輸入命令:npm install webpack --save-dev為項目添加webpack依賴

7.創建一個靜態文件hello.js,里面包含一個hello函數和通過require引入world.js

 

運行命令之前,hello.bundle.js不存在

運行命令:webpack hello.js hello.bundle.js,將hello.js編譯並打包到hello.bundle.js

hello.bundle.js文件內容如下:

Webpack 會分析入口文件,解析包含依賴關系的各個文件。這些文件(模塊)都打包到 bundle.js 。Webpack 會給每個模塊分配一個唯一的 id 並通過這個 id 索引和訪問模塊

運行過程中如果出現:webpack:command not found,請檢查是否在全局環境下安裝webpack,全局環境下安裝webpack使用命令:npm install webpack -g

接下來就要開始學習loader了:webpack前端構建工具學習總結(二)之loader的使用


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM