NPM模塊 Webpack的使用

1 NPM的擴展使用

1. npm init：初始化Node.js項目，創建必需的package.json文件
   npm init -y：創建必需的package.json文件(按默認方式)
2. npm help install：查看package.json文件中可用的所有條目
3. npm install xxx：安裝指定的依賴模塊
   npm install xxx --save：下載指定依賴模塊，聲明爲運行時依賴；
   npm install xxx --save-dev：下載並安裝指定依賴模塊，聲明爲開發時依賴；
   npm install：根據package.json中"運行時依賴dependencies"和"開發時依賴devDependencies"下載擴展模塊
   運行時依賴：當前項目在部署到服務器上共客戶端請求時需要使用到的第三方模塊(express)；
   開發時依賴：當前項目在程序員開發階段(最終運行之前)使用到的第三方模塊(sass，gulp壓縮文件)；
4. npm run xxx：執行當前目錄下package.json中的scripts所定義的命令；若執行如下命令：start、stop、test、rebuild，可以省略run，簡寫爲npm 執行的命令;
   package.json中特殊用法：
   {“scripts”: {“test”: “node ./test.js”}}定義可以使用npm run 執行的命令

2 模塊的使用

實際開發中，避免使用全局變量/函數造成全局污染。

	CommonJS規範	ES6模塊規範	ES6模塊規範
導出	module.exports = {age:20, work:function(){}}只能一次	export var age=20;export function work(){}每個模塊可以導出多個內部成員	export default {age:20; work:function(){}}每個模塊只能導出一個默認對象
導入	const obj = require(’./xxx’);obj.work();	import {age, work} from ‘./xxx’	import obj from ‘./xxx’;
書寫位置	導入/導出可以寫在頂級或內部	只能寫在最頂級	只能寫在最頂級
適用場合	只能在Node.js中使用；不能在瀏覽器中使用	服務器端node.js不支持	服務器端node.js不支持

3 Webpack的使用

官網：www.webpackjs.com
作用：把多個靜態資源文件(腳本/樣式/圖片等)打包爲一個/少數若干個靜態資源文件——通過減少客戶端請求次數/數據傳輸量提高Web訪問效率；
使用方法：完成web項目後使用Webpack打包靜態資源，在HTML中引入打包後的資源文件讓客戶端請求；
使用步驟：

1. 按照傳統方法編寫Web項目
2. 下載並安裝Webpack所需要的所有模塊
   npm i webpack --save-dev
3. 在項目根目錄下創建Webpack主配置文件
   webpack.config.js
4. 運行Webpack，讀取配置文件，執行打包工作
   node ./node_modules/webpack/bin/webpack.js
5. 修改HTML文件，只引入打包後得到的打包文件