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的使用