① node.js里的webpack不是內部或外部命令問題
環境變數沒有配置正確,你仔細檢測一下你的環境變數。、
你的採納是我前進的動力,還有不懂的地方,請繼續「追問」。
如你還有別的問題,可另外向我求助;答題不易,互相理解,互相幫助。
② webpack基本使用
step1: 創建一個項目錄
注意:項目名一般 不要帶中文
step2: 創建 package.json
或者:
step4: 處理第三方文件
html文件中需要引入多個js文件或者第三方模塊(例如:jquery.js),只引入項目js入口文件( main.js ),其他js文件均在入口文件中導入。導致可能JS文件中使用了瀏覽器不識別的高級語法:
總結:webpack可以做兩件事情況:
step5: 配置入口文件和出口文件
每次修改js文件,手動輸入命令: webpack 入口文件路徑 -o 出口文件路徑 重新打包, 每次都要輸入入口文件和出口文件,麻煩。可以在項目目錄下建立配置文件 webpack.config.js ,指定入口文件和出口文件:
重新打包:
step6: 實現自動打包編譯
每次修改js文件,都要手動重新打包,還是麻煩?使用 webpack-dev-server 這個工具,來實現自動打包編譯的功能。
webpack-dev-server 這個工具,如果想要正常運行,要求在本地項目中必須安裝 webpack
在 package.json 文件中配置命令:
在終端中執行命令:
註:在終端執行 npm run dev ,就等於執行 webpack-dev-server 命令。這將在node中開啟一個伺服器,並且立即打包。每次修改文件,ctrl + s 保存文件,webpack-dev-server工具自動監聽文件改變,並且自動打包。
改變文件引用路徑:
執行上述命令後終端會有類似信息輸出:
【 Project is running at http://localhost:8080/ 】——webpack-dev-server工具將項目託管到localhost:8080/埠上
【webpack output is served from /】——打包好的文件通過localhost:8080/bundle.js訪問
【Content not from webpack is served from C:UsersyfbDesktop前端學習案例4.27wabpackDemo_1src】——不是通過webpack打包的文件,則是以src為根目錄訪問。
該項目根目錄下並不存在bundel.js文件,我們可以認為webpack-dev-server把打包好的文件,以一種虛擬的形式託管到了咱們項目的根目錄中,雖然我們看不到它,但是可以認為和 dist、src、node_moles平級,有一個看不見的文件,叫做 bundle.js。其實是為了頻繁打包,提高效率,直接把打包的文件放在內存中。
因為項目託管到新伺服器,現在應該訪問的是 該伺服器 下的項目,文件引用路徑也要改變:
step7: 自動打開瀏覽器進行訪問、配置埠號、指定託管的根目錄、熱重載(只是修改補丁,不重新生成整個bundle.js文件)
在 package.json 中配置命令,並重啟伺服器:
step8: 使用 html-webpack-plugin 插件
使用 --contentBase 指令的過程比較繁瑣,需要指定啟動的目錄,同時還需要修改index.html中script標簽的src屬性。
安裝 html-webpack-plugin 插件:
在 webpack.config.js 配置文件中配置插件:
html-webpack-plugin 插件的兩個作用:
step9: 處理樣式文件
html文件中需要引入css、less、sass樣式文件。默認情況下,webpack處理不了這些樣式文件。
處理css文件:
處理less樣式文件
③ 為什麼安裝webpack後提示不是內部命令
因為安裝步驟出現了問題。
1.首先你需要安裝一個全局的webpack;
npm install webpack -g;
這樣你才可以正確的使用webpack這個命令;
2.然後, 你還可以在當前項目裡面也安裝一個webpack, 這也是官方推薦的做法;
npm install webpack --save-dev;
這樣就可以在你的webpack.config.js裡面方便的引用webpack;
// webpack.config.js;
var path = require('path');
var webpack = require('webpack');
3.然後在使用一些plugin的時候就比較方便了;
new webpack.optimize.CommonsChunkPlugin('common.js')。