導航:首頁 > 程序命令 > webpack命令找不到

webpack命令找不到

發布時間:2023-02-25 21:52:51

① 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')。

閱讀全文

與webpack命令找不到相關的資料

熱點內容
vcu盤加密怎麼設置 瀏覽:412
如何加密備份微信聊天記錄 瀏覽:527
安卓手機如何模擬鍵盤 瀏覽:930
查看dns地址命令 瀏覽:767
android錄屏工具 瀏覽:840
成都互動直播系統源碼 瀏覽:955
usb藍牙android 瀏覽:409
伺服器顯示error1什麼意思 瀏覽:710
python代碼精簡 瀏覽:459
文件加密了怎麼找到了 瀏覽:195
jellyfin插件怎麼選擇主伺服器 瀏覽:838
asp用戶注冊源碼 瀏覽:48
什麼是照片壓縮文件 瀏覽:392
java調用js代碼 瀏覽:979
崑山市民app怎麼修改身份信息 瀏覽:779
php登陸次數 瀏覽:746
python字元轉成數字 瀏覽:824
海川用的是什麼伺服器 瀏覽:378
口才是練出來的pdf 瀏覽:460
雲伺服器哪個公司性價比高 瀏覽:519