webpack學習總結(一)

標籤：包管理   bundle   .json   require   package   分享   使用   height   資料   

* webpack安裝

      1、 安裝最新node，node內建npm包管理器；

      2、 全域模式安裝webpack（只有將webpack在全域模式下安裝才能在命令列直接通過webpack執行命令）

            $npm install webpack -g

     3、切換到項目目錄

          

    4、然後在本地項目安裝依賴包webpack（在本地項目中載入了依賴包才能在項目中通過require來引入webpack）

          如果項目沒有package.json,先通過npm init建立package.json，不在npm上發布項目，建立時命令列中出現的選項就不重要

          

 

* webpack使用,打包js模組

   

    建立html檔案，並在檔案中引入打包檔案bundle.js(項目有關的所有的檔案打包之後合成這一個檔案，html最後只引入這一個打包檔案)

    建立空的打包檔案bundle.js、入口檔案entry.js（所有的內容的顯示入口）

   

 

    配置webpack（配置之後在命令列執行命令時只需輸入webpack，然後命令就會自動參考設定檔中配置選項來打包檔案）

         建立設定檔webpack.config.js

              

 

     執行webpack命令打包檔案：

          

    運行index.html

          

 * webpack打包其他類型的模組

    webpack本身只能打包原生JavaScript模組，如果要打包其他類型的檔案模組，例如：css、圖片、json等，需要通過loader轉換器將各種類型的資源轉換成JavaScript模組。

   

        

參考資料：

  webpack：http://webpackdoc.com/install.html

   入門Webpack，看這篇就夠了：http://www.jianshu.com/p/42e11515c10f

webpack學習總結(一)