webpack學習總結(一)
* 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學習總結(一)